参考 https://www.cnblogs.com/zeng-zhi/p/12376573.html
<template>
<div class="demo">
<el-transfer
v-model="value"
filterable
:data="data"
target-order="push"
:titles="titles"
:left-default-checked="hasCheckedWHLeftData"
@left-check-change="handleWHLeftChange"
:right-default-checked="hasCheckedWHRightData"
@right-check-change="handleWHRightChange"
></el-transfer>
</div>
</template>
<script >
import Sortable from "sortablejs";
export default {
name: "Tranfer",
data() {
return {
shiftKey: false,
firstWHLeftLocation: -1, //数据左边起始值
lastWHLeftLocation: -1, //数据左边终止值
hasCheckedWHLeftData: [], //数据左边选中的数据
firstWHRightLocation: -1, //数据右边起始值
lastWHRightLocation: -1, //数据右边终止值
hasCheckedWHRightData: [] //数据右边选中的数据
};
},
props: {
data: { type: Array, default: [] },
value: { type: Array, default: [] },
titles: { type: Array, default: [] }
},
watch: {
value: function(newval, oldval) {
this.$emit("change", newval);
}
},
created() {
let that = this;
window.addEventListener("keydown", e => {
if (e.keyCode === 16 && e.shiftKey) {
that.shiftKey = true;
}
});
window.addEventListener("keyup", e => {
that.shiftKey = false;
});
this.$nextTick(function() {
let el = document
.querySelector(".el-transfer")
.querySelectorAll(".el-checkbox-group")[1];
new Sortable(el, {
forceFallback: false,
onUpdate: event => {
let box = that.$el
.querySelector(".el-transfer")
.querySelectorAll(".el-checkbox-group")[1];
let nums = that.$el
.querySelector(".el-transfer")
.querySelectorAll(".el-checkbox-group")[1].childNodes.length;
console.log(nums, event.newIndex);
if (event.newIndex >= nums) {
return;
}
let newIndex = event.newIndex;
let oldIndex = event.oldIndex;
let $label = box.children[newIndex];
let $oldLabel = box.children[oldIndex];
box.removeChild($label);
if (newIndex < oldIndex) {
box.insertBefore($label, $oldLabel);
} else {
box.insertBefore($label, $oldLabel.nextSibling);
}
let item = that.value.splice(oldIndex, 1);
that.value.splice(newIndex, 0, item[0]);
}
});
});
},
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,
"key"
);
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) {
let arr = [];
// 当前有选中数据 并且 按住shift
if (_this.shiftKey) {
// if (isRight) {
for (let i = 0; i < arrList.length; i++) {
let 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++) {
let 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++) {
let item = value ? arrList[k][value] : arrList[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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
/deep/ .el-transfer__buttons {
/deep/ button {
display: block;
margin: 0;
&:first-child {
margin-bottom: 12px;
}
}
}
.demo {
text-align: left;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
text-align: left;
300px;
height: 300px;
background-color: #42b983;
overflow: scroll;
}
li {
display: block;
margin: 20px 10px;
border: 1px solid #444;
}
a {
color: #42b983;
}
</style>
<style lang='less' >
.el-transfer {
height: 100% !important;
.el-transfer-panel {
40% !important;
height: 100% !important;
}
.el-transfer__buttons {
20% !important;
}
}
</style>