需求:项目中需要做到除了勾选表格第一列勾选框去选中/取消数据外,还要通过点击该行的任何地方,都可以选中/取消到这条数据,具体操作如下:
1.首先给<el-table>添加 ref='multipleTableRef' 和 @row-click="handleClickTableRow"
// 我只展示跟本需求相关的属性,其他属性自行根据要求添加 <el-table ...... ref="multipleTable" @row-click="handleClickTableRow"> ...... </el-table>
2.以下为完整的vue3+ts的写法,主要是handleClickTableRow方法的书写
setup() { const multipleTableRef = ref<InstanceType<typeof ElTable>>(); const state = reactive({ // 模拟表格数据 tabledata: [ { date: "2016-05-03", name: "Tom", address: "No. 189, Grove St, Los Angeles", }, { date: "2016-05-02", name: "Tom", address: "No. 189, Grove St, Los Angeles", }, { date: "2016-05-04", name: "Tom", address: "No. 189, Grove St, Los Angeles", }, ], // 用于存放已选的数据 list: [] as any, }); // 点击表格某一行实现选中和取消复选框的方法 const handleClickTableRow = (row: any) => { // 判断本行数据是否已选择 const index = state.list.findIndex((r: any) => r.date == row.date); // 若未选择则将复选框改为选中状态,并将本行数据添加至list if (index == -1) { multipleTableRef.value!.toggleRowSelection(row, true); state.list.push(row); } else { // 若已选择则取消复选框的选中状态,并将本行数据从list中删除 multipleTableRef.value!.toggleRowSelection(row, false); state.list.splice(index, 1); } }; return { multipleTableRef, ...toRefs(state), handleClickTableRow, }; }