话不多说，先上效果图，一个是在页面中直接显示穿梭框，一个是在弹窗中显示穿梭框

代码如下

直接在页面显示穿梭框

<template><div class="demo"><el-transferv-model="value"filterable:data="data":filter-method="filterMethod":target-order="'push'":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>
import Sortable from "sortablejs";
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) {let regStr = query.replace(/\*/g, ".*");let 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", () => {this.shiftKey = false;});console.log(document);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].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 = this.value.splice(oldIndex, 1);console.log(this);this.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,"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; //取消勾选// debuggerfor (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 = [];// 当前有选中数据 并且 按住shiftif (_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 t = 0; t < arrList.length; t++) {let item = value ? arrList[t][value] : arrList[t];if (t >= lastLocation && t <= firstLocation) {hasCheckedData.push(item);}}}}} else {//不再按shifthasCheckedData.push(key1[0]);}}} else {//取消选中的hasCheckedData = [];for (var p = 0; p < key.length; p++) {if (key[p] != key1[0]) {hasCheckedData.push(key[p]);}}}// 去重hasCheckedData = new Set(hasCheckedData);hasCheckedData = Array.from(hasCheckedData);return hasCheckedData;},},
};
</script><style  scoped>
.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;
}
</style>

在弹窗中显示穿梭框

<template><div class="demo"><el-button @click="btnClick">显示弹窗</el-button><el-dialog :visible.sync="showForm"><el-form><el-form-item><el-transferv-model="value"filterable:data="data":filter-method="filterMethod":target-order="'push'":props="{ key: 'id', label: 'label' }":left-default-checked="hasCheckedWHLeftData"@left-check-change="handleWHLeftChange":right-default-checked="hasCheckedWHRightData"@right-check-change="handleWHRightChange"></el-transfer><!-- <el-transfer v-model="value" :data="data"></el-transfer> --></el-form-item></el-form></el-dialog></div>
</template>
<script>
import Sortable from "sortablejs";
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) {let regStr = query.replace(/\*/g, ".*");let 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: [], //数据右边选中的数据showForm: false,};},mounted() {},methods: {btnClick() {this.showForm = true;this.$nextTick(() => {window.addEventListener("keydown", (e) => {if (e.keyCode === 16 && e.shiftKey) {this.shiftKey = true;}});window.addEventListener("keyup", () => {this.shiftKey = false;});console.log(document);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].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 = this.value.splice(oldIndex, 1);console.log(this);this.value.splice(newIndex, 0, item[0]);},});});},// 数据左侧列表元素被用户选中 / 取消选中时触发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; //取消勾选// debuggerfor (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 = [];// 当前有选中数据 并且 按住shiftif (_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 t = 0; t < arrList.length; t++) {let item = value ? arrList[t][value] : arrList[t];if (t >= lastLocation && t <= firstLocation) {hasCheckedData.push(item);}}}}} else {//不再按shifthasCheckedData.push(key1[0]);}}} else {//取消选中的hasCheckedData = [];for (var p = 0; p < key.length; p++) {if (key[p] != key1[0]) {hasCheckedData.push(key[p]);}}}// 去重hasCheckedData = new Set(hasCheckedData);hasCheckedData = Array.from(hasCheckedData);return hasCheckedData;},},
};
</script><style  scoped>
.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;
}
</style>

二者的不同

两者的不同之处在于穿梭框的获取上面，穿梭框放到弹窗里面时，获取到的document.querySelector(".el-transfer")为undefined，百度后发现，说是若是想在el-dialog组件里面获取元素属性，需要放在nextTick里面，说法很多，具体是为啥，不是很懂，额