之前介绍过element-plus el-table 按住shift实现连续勾选多选，这里把vxe-table的实现方式也顺便写下，基本上差不多：
实现方法：
1、给vxe-table加上相关事件：
<vxe-table size="small" ref="vTable" :data="tableData" @checkbox-all="handleSelectionChange" @checkbox-change="shiftSelect" > </vxe-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.startPoint = undefined // 清空多选起点
this.endPoint = undefined // 清空多选终点
}
})
},4、定义handleSelectionChange和shiftSelect，方法其实通俗易懂，这里就不描述了。
methods: {
// 多选
handleSelectionChange(e) {
const rows = [...e.records]
this.selectDatas = JSON.parse(JSON.stringify(rows))
this.handlerSelectRow(rows)
},
shiftSelect(e) {
let rows = [...e.records]
const row = e.row
// 判断是勾选的时候才会多选
if (rows.length < this.selectDatas.length) {
this.startPoint = undefined// 清空多选起点
this.endPoint = undefined// 清空多选终点
}
// 判断此时有没有按住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.vTable.toggleCheckboxRow(this.tableData[i], true)
}
this.startPoint = undefined // 清空多选起点
this.endPoint = undefined // 清空多选终点
}else{ // 之前没有多选起点
this.startPoint = row.index // 把当前项的index标记为多选起点
}
}else{ // 没按住shift键
this.startPoint = undefined // 清空多选起点
this.endPoint = undefined // 清空多选终点
}
setTimeout(() => {
const $table = this.$refs.vTable
if ($table) {
const selectRecords = $table.getCheckboxRecords()
this.selectDatas = JSON.parse(JSON.stringify(selectRecords))
}
}, 30)
},
}