element 穿梭框按住shift可實(shí)現(xiàn)checkbox多選功能

<template>
  <div class="demo">
    <el-transfer
      v-model="value"
      filterable
      :data="data"
      :filter-method="filterMethod"
      :target-order="'push'"
      :titles="['左邊數(shù)據(jù)', '右邊數(shù)據(jù)']"
      :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: `備選項(xiàng) ${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, // 數(shù)據(jù)左邊起始值
      lastWHLeftLocation: -1, // 數(shù)據(jù)左邊終止值
      hasCheckedWHLeftData: [], // 數(shù)據(jù)左邊選中的數(shù)據(jù)
      firstWHRightLocation: -1, // 數(shù)據(jù)右邊起始值
      lastWHRightLocation: -1, // 數(shù)據(jù)右邊終止值
      hasCheckedWHRightData: [] // 數(shù)據(jù)右邊選中的數(shù)據(jù)
    }
  },
  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: {
    // 數(shù)據(jù)左側(cè)列表元素被用戶選中 / 取消選中時(shí)觸發(fā)
    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)
    },
    // 數(shù)據(jù)右側(cè)列表元素被用戶選中 / 取消選中時(shí)觸發(fā)
    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 = []
          // 當(dāng)前有選中數(shù)據(jù) 并且 按住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>