Vue2 之 el-table 实现表格第一列默认显示序号当鼠标移动上去时切换为复选框，并且可以进行选中与反选操作

最终效果

实现思路

• 定义变量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="cellEn