vueel-transfer新增拖拽排序功能---sortablejs插件
<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) {
/
/ uListdata.indexOf(query) > -1
const regStr = place(/\*/g, '.*')
const reg = new RegExp(regStr)
st(item.label)
}
}
},
watch: {
// 监听弹窗显⽰，可以⽤来写编辑时的请求接⼝
model: function(newVal, oldVal) {
if (newVal) {
this.value = newVal
}
}
},
mounted() {
const transfer = this.$ansfer.$el
const leftPanel = ElementsByClassName('el-transfer-panel')[0].getElementsByClassName('el-transfer-panel__body')[0]
const rightPanel = ElementsByClassName('el-transfer-panel')[1].getElementsByClassName('el-transfer-panel__body')[0]
const rightEl = ElementsByClassName('el-transfer-panel__list')[0]
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.实际拖拽排序看到的效果是当前拖拽元素拖拽到其他地⽅，其他地⽅的元素会下移,⽽不是调换顺序// 去除空字符串
vuejs流程图插件
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 = ElementsByClassName('el-transfer-panel__list')[0]
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)
}
})
ev.preventDefault()
}
ev.preventDefault()
const index = this.value.indexOf(this.draggingKey)
if (index !== -1) {
this.value.splice(index, 1)
}
}
ev.preventDefault()
}
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。