elementUI-table Shift多选

1.页面 table上加

@select="pinSelect" ref="multipleTable"

2.定义字段

origin: -1, // 起点数
pin: false, // 默认shift不按住

3.页面加载时监听按键

mounted () {
    window.addEventListener('keydown', code => { // 这个是获取键盘按住事件
      console.log(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.获取dataList 时遍历添加index

let dataList = data.data.records || []
if (dataList.length > 0) {
　　dataList.forEach((item, index) => { // 遍历索引,赋值给data数据
   　　item.index = index
　　})
}
this.dataList = dataList

5.按键时选中的方法

pinSelect (item, index) {
   const data = this.$refs.multipleTable.tableData // 获取所有数据
   const origin = this.origin // 起点数 从-1开始
   const endIdx = index.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
       this.$refs.multipleTable.toggleRowSelection(data[index], true)// 通过ref打点调用toggleRowSelection方法，第二个必须为true
          i++
       }
   } else {
      this.origin = index.index // 没按住记录起点
   }
},