<script> import Sortable from 'sortablejs' export default { name: 'Transfer', props: { model: { type: Array, default: () => { return [] } }, data: { type: Array, default: () => { return [] } } }, data() { return { datas: this.data, value: [], draggingKey: '', menuFilterMethod(query, item) { // return item.menuListdata.indexOf(query) > -1 const regStr = query.replace(/\*/g, '.*') const reg = new RegExp(regStr) return reg.test(item.label) } } }, watch: { // 监听 弹窗显示， 可以用来写 编辑时的请求接口 model: function(newVal, oldVal) { if (newVal) { this.value = newVal } } }, 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, { animation: 100, onEnd: (evt) => { const { oldIndex, newIndex } = evt const temp = this.value[oldIndex] if (!temp || temp === 'undefined') { return }// 解决右边最后一项从右边拖左边，有undefined的问题 //这里和网上的有点不一样,网上搜到的结果排序是,当前拖拽的元素和拖拽位置的元素互换位置,但是实际上在使用el-transfer有两个问题 //1.右侧排序value的数组顺序来源于后台穿的数组顺序,实际如果不设置target-order="unshift"的话,展示会按照左侧的数据列顺序展示,导致拖拽排序时顺序乱七八糟
//2.实际拖拽排序看到的效果是当前拖拽元素拖拽到其他地方,其他地方的元素会下移,而不是调换顺序 // 去除空字符串 for (var i = 0; i < this.value.length; i++) { if (this.value[i] === '' || this.value[i] === null || typeof (this.value[i]) === 'undefined') { this.value.splice(i, 1) i = i - 1 } } const arr_temp = [].concat(this.value) // 创建一个新的临时数组，用以操作后不变更原数组 console.log(this.value) arr_temp.splice(newIndex, 0, arr_temp.splice(oldIndex, 1)[0]) // 在b位置插入从a位置截取的元素 this.value = arr_temp console.log(this.value) this.$emit('update:call-back', this.value) } }) const leftEl = leftPanel.getElementsByClassName('el-transfer-panel__list')[0] Sortable.create(leftEl, { animation: 100, onEnd: (evt) => { const { oldIndex, newIndex } = evt const temp = this.datas[oldIndex] this.$set(this.datas, oldIndex, this.datas[newIndex]) this.$set(this.datas, 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 }, onChange(value, direction, movedKeys) { // console.log(value, direction, movedKeys) this.$emit('update:call-back', value) } }
} </script>