共计 1958 个字符，预计需要花费 5 分钟才能阅读完成。
芯资管我的项目要求 el-transfer 减少拖拽排序，左右高低相互拖拽性能；
原来的组件不反对拖拽，这里要用个第三方脱宅组件 sortablejs
首先装置
sudo npm i sortablejs --save-dev
html 代码
<template>
<el-transfer ref="transfer" id="transfer" v-model="value" :data="data">
<span slot-scope="{option}" :draggable="!option.disabled" @dragstart="drag($event,option)">{{option.key}} - {{option.label}}</span>
</el-transfer>
</template>```create
<script>
import Sortable from 'sortablejs'
export default {data() {
const generateData = _ => {const data = []; for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: ` 备选项 ${i}`,
disabled: i % 4 === 0 });
} return data;
}; return {data: generateData(),
value: [1, 4],
draggingKey : null }
},
mounted() {
const transfer = this.$refs.transfer.$el
const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
const rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0]
Sortable.create(rightEl,{onEnd: (evt) => {const {oldIndex,newIndex} = evt;
const temp = this.value[oldIndex]
if (!temp || temp === 'undefined') {return}// 解决左边最初一项从左边拖右边，有 undefined 的问题
this.$set(this.value,oldIndex,this.value[newIndex])
this.$set(this.value,newIndex,temp)
}
})
const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0]
Sortable.create(leftEl,{onEnd: (evt) => {const {oldIndex,newIndex} = evt;
const temp = this.data[oldIndex]
if (!temp || temp === 'undefined') {return} // 解决左边最初一项从左边拖右边，有 undefined 的问题
this.$set(this.data,oldIndex,this.data[newIndex])
this.$set(this.data,newIndex,temp)
}
})
leftPanel.ondragover = (ev) => {ev.preventDefault()
}
leftPanel.ondrop = (ev) => {ev.preventDefault();
const index = this.value.indexOf(this.draggingKey) if(index !== -1){this.value.splice(index,1)
}
}
rightPanel.ondragover = (ev) => {ev.preventDefault()
}
rightPanel.ondrop = (ev) => {ev.preventDefault(); if(this.value.indexOf(this.draggingKey) === -1){this.value.push(this.draggingKey)
}
}
},
methods: {drag(ev,option) {this.draggingKey = option.key}
}
} </script>
正文完
