vue el-checkbox按下shift键实现批量选择数据

1.先看下效果

2.代码分析

1.添加html代码，先将列表写出来

<el-button @click="checkAll(true)">全选</el-button>
 <el-button @click="checkAll(false)">全不选</el-button>
 <el-button @click="checkInvert">反选</el-button>
<el-checkbox-group v-model="selectData" class="checkbox-group" @change="selectionChange">
    <el-checkbox
    	v-for="(val, key) in tableData"
    	:key="key"
    	:label="val"
    	@click.native="itemClick(val)"
    >
    	{
  { val.name }}
    </el-checkbox>
</el-checkbox-group>

2.初始化数据：给原数据添加index属性

created() {
   
   this.tableData.forEach((item, index) => {
    // 遍历索引,赋值给data数据
     item.index = index
   })
 },

3.设置一个flag记录是否按下了shift键，通过监听键盘按下和松开给flag赋值

window.addEventListener('keydown', code => {
   
 if (code.keyCode === 16 && code.shiftKey) {
    // 判断是否按住shift键，是就把pin赋值为true
     this.pin = true
   }
 })
window.addEventListener('keyup', code => {
   
  if(code.keyCode === 16){
    // 判断是否松开shift键，是就把pin赋值为false
    this.pin = false
  }
 })

4.el-checkbox勾选会触发change事件，所以在change绑定的selectionChange函数进行操作：当按住shift键时，将起止区间内的数据都选上

// 多选框勾选触发
selectionChange(item) {
   
 const data = this.tableData // 获取所有数据
 const origin = this.origin // 起点数 从-1开始
 const endIdx = item.length === 0 ? -1 : item[item.length - 1].index // 终点数
 if (this.pin && item.includes(data[origin])) {
    // 判断按住
   const sum = Math.abs(origin - endIdx) + 1 // 这里记录终点
   const min = Math.min(origin, endIdx) // 这里记录起点
   let i = 0
   while (i < sum) {
   
     const index = min + i
     const flagIdx = this.selectData.indexOf(data[index]) // 判断区间内的数据是否已选中
     if (flagIdx === -1) {
    // 值为-1表示未选中
       this