单选框 通用组件优化

mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/dialogSelectOnly.vue

@@ -25,8 +25,10 @@
     <el-card class="hl-card">
       <!-- 列表 -->
       <ContentWrap>
-        <el-table v-loading="loading" :data="tablelist" :stripe="true" highlight-current-row class="hl-table" @current-change="handleSelectionChange">
-
+        <el-table v-loading="loading" :data="tablelist" :stripe="true"  class="hl-table" @selection-change="handleSelectionChange"
+         @row-click="clickRow" ref="multipleTable" selection
+        >
+          <el-table-column fixed type="selection" width="40" />
           <el-table-column fixed label="序号" type="index" width="60" />
           <el-table-column fixed label="名称" align="center" prop="name" min-width="220" />
           <el-table-column label="编号" align="center" prop="code" min-width="220" />
@@ -107,10 +109,22 @@ const tablelist = ref([
     code: 'heli000'
   }
 ])
-
-const multipleSelection = ref([])
-const handleSelectionChange = (val) => {
-  multipleSelection.value = val
+const multipleTable = ref<InstanceType<typeof ElTable>>()
+const multipleSelection:any = ref([])
+const handleSelectionChange = (val: []) => {
+  if (val.length > 1) {
+    multipleTable.value.clearSelection()
+    multipleTable.value.toggleRowSelection(val.pop())
+  } else {
+    multipleSelection.value = val.pop()
+  }
+}
+const clickRow = (row: any) => {
+ if(row){
+   multipleTable.value!.toggleRowSelection(row, undefined)
+ }else{
+  multipleTable.value!.clearSelection()
+ }
 }
 
 /** 提交表单 */