vue+element中实现按住shift连续选择Checkbo

1.html代码

<el-checkbox-group v-model="selectData" class="checkbox-group" @change="selectionChange">
     <template v-for="(val, key) in lasList">
            <el-checkbox v-if="val.flag==0" :key="key" :label="val" disabled :indeterminate="indeterminate">{{ val.lasName }}</el-checkbox>
             <el-checkbox v-else :key="key" :label="val" @click.native="itemClick(val)">{{ val.lasName }}</el-checkbox>
      </template>
</el-checkbox-group>

2.js代码

export default {
  name: 'trajectory',
  data () {
    return {
       origin: -1, // 作为起点
       pin: false, // 默认为false，未按住
        indeterminate: true, //checkbox是否可选状态
        lasList: [], //checkbox数据
        selectData: [], // 勾选的数据
    }
  },
 mounted () {
    // 监听按下键盘事件
    window.addEventListener('keydown', e => {
      if (e.keyCode === 16 && e.shiftKey) {
        this.pin = true
      }
    })
    window.addEventListener('keyup', e => {
      this.pin = false
    })
  },
}

methods: {
// 复选框多选功能
    selectionChange (item) {
      setTimeout(() => {
        const data = this.lasList // 获取所有数据
        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.selectData.push(data[index])
            }
            i++
          }
        } else {
          //this.origin = endIdx // 没按住记录起点
        }
        console.log(this.selectData) // 当前选中的数据
      }, 50)
    },
  itemClick (item) {
      if (!this.pin && !this.selectData.includes(item)) {
        this.origin = item.index // 没按住记录起点
      }
    },
}