Vue el-table 表格第一列序号与复选框hover切换

效果如下：

思路：

1. 定义变量columnCheckedId 记录当鼠标移入到当前行的序号上时其对应的id值，然后与当前行本身的id进行比较若相等则变为复选框，当移出时将columnCheckedId变量变为空即处于序号状态
2. 定义变量isAllSelected用来记录全选是否被选中，定义数组checkedList，用来记录全选的状态以true或false的形式存储在数组checkedList中。当处于全选状态时，则checkedList里全为true，反之则checkedList数组里存在false
3. 数组multipleSelection用来记录当前选中的数据
4. 反选的实现就是给每个表格项处于复选框状态时添加一个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);
    }
},