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"
>
import Sortable from "sortablejs";
const generateData = () => {
const data = [];
for (let i = 1; i <= 30; i++) {
({
id: i,
label: `备选项 ${i}`
});
}
return data;
};
export default {
name: "DragSortMultiSelect",
data() {
return {
filterMethod(query, item) {
let regStr = (/\*/g, ".*");
let reg = new RegExp(regStr);
return ();
},
data: generateData(),
value: [4, 2, 1],
shiftKey: false,
firstWHLeftLocation: -1, //数据左边起始值
lastWHLeftLocation: -1, //数据左边终止值
hasCheckedWHLeftData: [], //数据左边选中的数据
firstWHRightLocation: -1, //数据右边起始值
lastWHRightLocation: -1, //数据右边终止值
hasCheckedWHRightData: [] //数据右边选中的数据
};
},
mounted() {
("keydown", e => {
if ( === 16 && ) {
= true;
}
});
("keyup", e => {
= false;
});
let el = document
.querySelector(".el-transfer")
.querySelectorAll(".el-checkbox-group")[1];
new Sortable(el, {
forceFallback: false,
onUpdate: event => {
let box = this.$el
.querySelector(".el-transfer")
.querySelectorAll(".el-checkbox-group")[1];
let nums = this.$el
.querySelector(".el-transfer")
.querySelectorAll(".el-checkbox-group")[1].;
console.log(nums, );
if ( >= nums) {
return;
}
let newIndex = ;
let oldIndex = ;
let $label = [newIndex];
let $oldLabel = [oldIndex];
($label);
if (newIndex < oldIndex) {
($label, $oldLabel);
} else {
($label, $);
}
let item = (oldIndex, 1);
(newIndex, 0, item[0]);
}
});
},
methods: {
// 数据左侧列表元素被用户选中 / 取消选中时触发
handleWHLeftChange(key, key1) {
var _this = this;
(_this.hasCheckedWHLeftData);
_this.hasCheckedWHLeftData = _this.commonChangeFuc(
key,
key1,
_this.hasCheckedWHLeftData,
_this.firstWHLeftLocation,
_this.lastWHLeftLocation,
_this.data,
"id"
);
(_this.hasCheckedWHLeftData);
},
// 数据右侧列表元素被用户选中 / 取消选中时触发
handleWHRightChange(key, key1) {
var _this = this;
(_this.hasCheckedWHRightData);
_this.hasCheckedWHRightData = _this.commonChangeFuc(
key,
key1,
_this.hasCheckedWHRightData,
_this.firstWHRightLocation,
_this.lastWHRightLocation,
_this.value,
false
);
(_this.hasCheckedWHRightData);
},
// 公共按住shift 多选
commonChangeFuc(
key,
key1,
hasCheckedData,
firstLocation,
lastLocation,
arrList,
value
) {
var _this = this;
var cFlag = false; //取消勾选
// debugger
for (var i = 0; i < ; i++) {
if (key[i] == key1[0]) {
cFlag = true; //选中
}
}
if (cFlag) {
if ( == 1) {
firstLocation = 0;
(key[0]);
} else if ( > 1) {
let arr = [];
// 当前有选中数据 并且 按住shift
if (_this.shiftKey) {
// if (isRight) {
for (let i = 0; i < ; i++) {
let item = value ? arrList[i][value] : arrList[i];
if (item == key[ - 2]) {
firstLocation = i;
}
if (item == key1[0]) {
lastLocation = i;
}
}
if (firstLocation != -1 && lastLocation != -1) {
if (firstLocation < lastLocation) {
for (var k = 0; k < ; k++) {
let item = value ? arrList[k][value] : arrList[k];
if (k >= firstLocation && k <= lastLocation) {
(item);
}
}
} else if (firstLocation > lastLocation) {
for (var k = 0; k < ; k++) {
if (k >= lastLocation && k <= firstLocation) {
(item);
}
}
}
}
} else {
//不再按shift
(key1[0]);
}
}
} else {
//取消选中的
hasCheckedData = [];
for (var i = 0; i < ; i++) {
if (key[i] != key1[0]) {
(key[i]);
}
}
}
// 去重
hasCheckedData = new Set(hasCheckedData);
hasCheckedData = Array.from(hasCheckedData);
return hasCheckedData;
}
}
};
/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;
width: 300px;
height: 300px;
background-color: #42b983;
overflow: scroll;
}
li {
display: block;
margin: 20px 10px;
border: 1px solid #444;
}
a {
color: #42b983;
}