通用组件 复选框点击列表行自动勾选

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

@@ -25,7 +25,8 @@
     <el-card class="hl-card">
       <!-- 列表 -->
       <ContentWrap>
-        <el-table v-loading="loading" :data="tablelist" :stripe="true"  class="hl-table" @selection-change="handleSelectionChange" selection>
+        <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" />
@@ -53,6 +54,7 @@
 import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter, dateFormatter2, formatDate } from '@/utils/formatTime'
 import { ref } from 'vue'
+import { ElTable } from 'element-plus'
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -107,10 +109,20 @@ const tablelist = ref([
   }
 ])
 
+const multipleTable = ref<InstanceType<typeof ElTable>>()
 const multipleSelection = ref([])
 const handleSelectionChange = (val: []) => {
+  
   multipleSelection.value = val
 }
+
+const clickRow = (row: any) => {
+ if(row){
+   multipleTable.value!.toggleRowSelection(row, undefined)
+ }else{
+  multipleTable.value!.clearSelection()
+ }
+}
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = () => {