校验队长的唯一性

src/views/registrationGroup/components/stuList.vue

@@ -52,12 +52,17 @@
             <span style="margin-left: 10px">是否队长</span>
           </template>
           <template #default="{ row }">
-            <el-cascader
-              :modelValue="row.captain"
-              @update:modelValue="(arr: any[]) => (row.captain = arr[0])"
-              :options="options"
-              :disabled="isDisable"
+            <el-select v-model="row.captain" @update:modelValue="(arr:any[]) => {row.captain =arr[0]
+            }"
+            @change="()=>checkUniqueness(row)"
+            :options="options">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
             />
+            </el-select>
           </template>
         </el-table-column>
         <el-table-column>
@@ -133,6 +138,23 @@ const options = [
     label: '否',
   },
 ]
+//检查队长的唯一性
+const checkUniqueness = (row:any) =>{
+  //查询tableDate中队长的人数
+  const count = tableData.filter(item => item.captain === '1').length
+  if(count === 2){
+    ElMessage({
+      message:'已有队长人选!',
+      type:'error'
+    })
+    row.captain = '0'
+  }else if(count === 0){
+    ElMessage({
+      message:'请选择队长人选!',
+      type:'error'
+    })
+  }
+}
 
 // 数据
 const tableData = reactive<any[]>([])