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>
