el-table 结合键盘 “shift” 键实现复选框多选

本文链接：https://blog.youkuaiyun.com/weixin_42751067/article/details/138669759

要知道 el-table 表格的复选框只支持单个点击勾选和全部勾选，那么有没有可以选择一部分表行勾选的方法呐？答案是：有

实现起来呢也非常简单，思路：在“shift”键按下的时候确定想要勾选的表行并给这些行设置勾选状态即可

首先根据Element UI文档找到（下图）这个事件：cell-mouse-enter(row, column, cell, event)

接下来方法实现

先给表格绑定鼠标移入事件

<el-table
  ref="listEdit"
  @cell-mouse-enter="handleCellMouseEnter"
></el-table>

紧接着在methods中实现对此事件的处理

handleCellMouseEnter(row, column, cell, event){ // 鼠标移入单元格
  // console.log(row, column, cell, event);
  if (column.type === 'selection' && event.shiftKey) { // 且按着 shift 键 则勾选这一行
    this.$refs.listEdit.toggleRowSelection(row, true);
  }
},

在鼠标移入单元格的时候会触发handleCellMouseEnter方法，此方法的 event 参数的 shiftKey 属性就是键盘 shift 键按下与否的标识（如下图）