<template>
<!--
target-order="unshift"必須設置,如果不設置的話后台穿的value值得順序會被data重置 - -->
<el-transfer ref="transfer" id="transfer" v-model="value"
target-order="unshift" :data="datas" filterable :filter-method="menuFilterMethod" filter-placeholder="Please enter button" :titles="['Select', 'Selected']" @change="onChange">
<span slot-scope="{ option }" class="item" @dragstart="drag($event,option)">{{ option.label }}</span>
</el-transfer>
</template>
<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>