element-plus el-table 按住shift实现连续勾选多选，即选中第一个，按住shift再选中最后一个，会自动将中间的都勾选，效果图如下：
实现方法：
1、给el-table加上相关事件：
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" @selection-change="handleSelectionChange" @select="shiftSelect" > </el-table>
2、在data中定义相关参数：
data() {
return {
selectDatas: [],
startPoint: 0, // 多选起点
endPoint: undefined,// 多选终点
pin: false, // 是否按住，默认不按住
}
}3、监听shift按下：
mounted() {
// 监听keydown：获取键盘按住事件,code返回按住的键信息
window.addEventListener('keydown', code => {
// 判断是否按住了shift键（左右都包括）
if (code.keyCode === 16 && code.shiftKey) {
this.pin = true // 标记按住了shift键
this.startPoint = this.selectDatas.length ? this.selectDatas[this.selectDatas.length-1].index : 0
}
})
// 监听keyup：获取键盘松开事件,code返回按住的键信息
window.addEventListener('keyup', code => {
// 判断是否松开了shift键（左右都包括），以为之前已经按下了code.shiftKey已经是true
if (code.keyCode == 16) {
this.pin = false // 标记松开了shift键
this.endPoint = undefined // 清空多选终点
}
})
},4、定义handleSelectionChange和shiftSelect，方法其实通俗易懂，这里就不描述了。
methods: {
// 多选
handleSelectionChange(rows) {
this.selectDatas = JSON.parse(JSON.stringify(rows))
},
// 按住shift多选
shiftSelect(rows, row) {
// 判断是勾选的时候才会多选
if (rows.length < this.selectDatas.length) {
this.startPoint = undefined// 清空多选起点
this.endPoint = undefined// 清空多选终点
return
}
// 判断此时有没有按住shift键
// 按住了则表示开始多选，没有则停止多选，清空起点终点.
// 开始多选则判断之前是否有起点
// 有则当前的index标记为终点且勾选这之间的数据，勾选结束清空起点终点
// 没有则当前的index标记为起点
// 记录当前的index为多选起点
if (this.pin) { // 按住了shift键
if (this.startPoint || this.startPoint === 0) { // 之前有多选起点（第一条单独）
this.endPoint = row.index // 把当前项的index标记为多选终点
if (this.startPoint > this.endPoint) { // 如果起点大于终点，则替换否则保留，确保起点始终小于终点
let temp = this.startPoint
this.startPoint = this.endPoint
this.endPoint = temp
}
// 勾选数据
const startPoint = this.startPoint
const endPoint = this.endPoint
for (let i = startPoint + 1; i < endPoint; i++) {
this.$refs.scTable.toggleRowSelection(this.tableData[i],true)
}
this.startPoint = undefined // 清空多选起点
this.endPoint = undefined // 清空多选终点
}else{ // 之前没有多选起点
this.startPoint = row.index // 把当前项的index标记为多选起点
}
}else{ // 没按住shift键
this.startPoint = undefined // 清空多选起点
this.endPoint = undefined // 清空多选终点
}
},
}