element Transfer穿梭框shift多选checkb

element 穿梭框按住shift可实现checkbox多选功能

<template>
  <div class="demo">
    <el-transfer
      v-model="value"
      filterable
      :data="data"
      :filter-method="filterMethod"
      :target-order="'push'"
      :titles="['左边数据', '右边数据']"
      :props="{ key: 'id', label: 'label' }"
      :left-default-checked="hasCheckedWHLeftData"
      @left-check-change="handleWHLeftChange"
      :right-default-checked="hasCheckedWHRightData"
      @right-check-change="handleWHRightChange"
    ></el-transfer>
  </div>
</template>
<script>
const generateData = () => {
  const data = []
  for (let i = 1; i <= 30; i++) {
    data.push({
      id: i,
      label: `备选项 ${i}`
    })
  }
  return data
}
export default {
  name: 'DragSortMultiSelect',
  data () {
    return {
      filterMethod (query, item) {
        const regStr = query.replace(/\*/g, '.*')
        const reg = new RegExp(regStr)
        return reg.test(item.label)
      },
      data: generateData(),
      value: [4, 2, 1],
      shiftKey: false,
      firstWHLeftLocation: -1, // 数据左边起始值
      lastWHLeftLocation: -1, // 数据左边终止值
      hasCheckedWHLeftData: [], // 数据左边选中的数据
      firstWHRightLocation: -1, // 数据右边起始值
      lastWHRightLocation: -1, // 数据右边终止值
      hasCheckedWHRightData: [] // 数据右边选中的数据
    }
  },
  mounted () {
    window.addEventListener('keydown', e => {
      if (e.keyCode === 16 && e.shiftKey) {
        this.shiftKey = true
      }
    })
    window.addEventListener('keyup', e => {
      this.shiftKey = false
    })
    const el = document
      .querySelector('.el-transfer')
      .querySelectorAll('.el-checkbox-group')[1]
  },
  methods: {
    // 数据左侧列表元素被用户选中 / 取消选中时触发
    handleWHLeftChange (key, key1) {
      var _this = this
      console.log(_this.hasCheckedWHLeftData)
      _this.hasCheckedWHLeftData = _this.commonChangeFuc(
        key,
        key1,
        _this.hasCheckedWHLeftData,
        _this.firstWHLeftLocation,
        _this.lastWHLeftLocation,
        _this.data,
        'id'
      )
      console.log(_this.hasCheckedWHLeftData)
    },
    // 数据右侧列表元素被用户选中 / 取消选中时触发
    handleWHRightChange (key, key1) {
      var _this = this
      console.log(_this.hasCheckedWHRightData)
      _this.hasCheckedWHRightData = _this.commonChangeFuc(
        key,
        key1,
        _this.hasCheckedWHRightData,
        _this.firstWHRightLocation,
        _this.lastWHRightLocation,
        _this.value,
        false
      )
      console.log(_this.hasCheckedWHRightData)
    },
    // 公共按住shift 多选
    commonChangeFuc (
      key,
      key1,
      hasCheckedData,
      firstLocation,
      lastLocation,
      arrList,
      value
    ) {
      var _this = this
      var cFlag = false // 取消勾选
      // debugger
      for (var i = 0; i < key.length; i++) {
        if (key[i] == key1[0]) {
          cFlag = true // 选中
        }
      }
      if (cFlag) {
        if (key.length == 1) {
          firstLocation = 0
          hasCheckedData.push(key[0])
        } else if (key.length > 1) {
          const arr = []
          // 当前有选中数据 并且 按住shift
          if (_this.shiftKey) {
            // if (isRight) {
            for (let i = 0; i < arrList.length; i++) {
              const item = value ? arrList[i][value] : arrList[i]
              if (item == key[key.length - 2]) {
                firstLocation = i
              }
              if (item == key1[0]) {
                lastLocation = i
              }
            }
            if (firstLocation != -1 && lastLocation != -1) {
              if (firstLocation < lastLocation) {
                for (var k = 0; k < arrList.length; k++) {
                  const item = value ? arrList[k][value] : arrList[k]

                  if (k >= firstLocation && k <= lastLocation) {
                    hasCheckedData.push(item)
                  }
                }
              } else if (firstLocation > lastLocation) {
                for (var k = 0; k < arrList.length; k++) {
                  if (k >= lastLocation && k <= firstLocation) {
                    hasCheckedData.push(item)
                  }
                }
              }
            }
          } else {
            // 不再按shift
            hasCheckedData.push(key1[0])
          }
        }
      } else {
        // 取消选中的
        hasCheckedData = []
        for (var i = 0; i < key.length; i++) {
          if (key[i] != key1[0]) {
            hasCheckedData.push(key[i])
          }
        }
      }
      // 去重
      hasCheckedData = new Set(hasCheckedData)
      hasCheckedData = Array.from(hasCheckedData)
      return hasCheckedData
    }
  }
}
</script>