最终效果

实现思路

• 定义变量columnCheckedId 记录当鼠标移入到当前行的序号上时其对应的id值，然后与当前行本身的id进行比较若相等则变为复选框，当移出时将columnCheckedId变量变为空即处于序号状态
• 定义变量isAllSelected用来记录全选是否被选中，定义数组checkedList，用来记录全选的状态以true或false的形式存储在数组checkedList中。当处于全选状态时，则checkedList里全为true，反之则checkedList数组里存在false
• 数组multipleSelection用来记录当前选中的数据
• 反选的实现就是给每个表格项处于复选框状态时添加一个change事件，然后判断当当前项checkedList[index]处于选中状态时则调用el-table里的toggleRowSelection方法进行判断，若当前项被选中则传入true，反之传入false即可实现

相关代码

<div><p class="selected-all"><span>已选中：</span><span>222</span></p><el-table :data="tableData1" style="width: 100%" @cell-mouse-enter="cellEnter1" @cell-mouse-leave="cellLeave1"@selection-change="handleSelectionChange1"><el-table-column label="序号" type="selection" width="50" align="center"><template #default="{ row, $index }"><div v-if="columnCheckedId1 == row.id || checkedList1[$index]"><el-checkbox v-model="checkedList1[$index]"></el-checkbox></div><span v-else>{{ $index + 1 }}</span></template></el-table-column><el-table-column prop="data_title" label="数据标题"></el-table-column><el-table-column prop="owner_department" label="拥有者部门"></el-table-column><el-table-column prop="create_time" label="创建时间"></el-table-column><el-table-column prop="owner_template" label="所属模型"></el-table-column><el-table-column prop="document_status" label="单据状态"></el-table-column></el-table><!-- 分页器 --><Panigation :total="todo_total1" :page.sync="todo_pageNum1" :limit.sync="todo_pageSize1"@pagination="getApplicationData" />
</div>// 待办任务
ruleForm: {recipient: "",process_template: "",promoter: "",
},
rules: {recipient: [{ required: true, message: "请选择接收人", trigger: "change" },],process_template: [{ required: true, message: "请选择流程模板", trigger: "change" },],promoter: [{ required: true, message: "请选择发起人", trigger: "change" },],
},
tableData: [{id: 1,process_name: "流程名称",process_node: "流程节点",process_template: "流程模板",promoter: "张三",reception_time: "2016-05-02",},{id: 2,process_name: "流程名称2",process_node: "流程节点2",process_template: "流程模板2",promoter: "张三2",reception_time: "2016-05-06",},
],
columnCheckedId: "",
multipleSelection: [], //全选
checkedList: [], //table多选选中数据
isAllSelected: false, // 全选是否选中
todo_total: 9000,
todo_pageNum: 1,
todo_pageSize: 20,/**
* 待办任务区域逻辑
*/
// 获取数据
getTodoListData() {},
// 全选
handleSelectionChange(val) {this.multipleSelection = val;// 全选this.isAllSelected = val.length === this.tableData.length;if (this.isAllSelected) {this.checkedList = this.tableData.map((item, index) => {return true;});} else {this.checkedList = this.tableData.map((item, index) => {const isSelected = val.some((selected) => selected.id === item.id);return isSelected;});}
},
//移入当前行
cellEnter(row) {this.columnCheckedId = row.id;
},
// 移出当前行
cellLeave(row) {this.columnCheckedId = "";
},
// 选中与否塞数据--反选
cellCheckbox(row, index) {if (this.checkedList[index]) {this.$refs.table.toggleRowSelection(row, true);} else {this.$refs.table.toggleRowSelection(row, false);}
},