element el-transfer组件实现右侧列表可拖拉拽效果

需求是实现Transfer 穿梭框选中的数据列表，可以拖拉拽进行排序功能。

---

主要是使用到了sortablejs插件。

首先安装sortablejs

npm install sortablejs --save

再使用的vue文件中引用插件

<el-transfer 
    ref="transfer" 
    v-model="form" :data="groupModalList"
    :titles="['未选', '已选']"
    @change="transferList"
    target-order="push"
>
</el-transfer>


import Sortable from 'sortablejs'

data () {
    return {
        form: [],
        groupModalList: []
    }
}

methods: {
   transferList (e) {
      this.$forceUpdate() 
   } 
}

mounted() {
    this.$nextTick(() => {
        const transfer = this.$refs.transfer.$el
        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
            console.log(oldIndex, newIndex)
            let _arr = this.form.splice(oldIndex, 1)
            this.form.splice(newIndex, 0, _arr[0])
            console.log(this.form)
          }
        })
      })
}

• transferList里的$forceUpdate是为了强制更新列表数据。
• 建议target-order=“push” 设置为push模式，这样左侧选择的item会被追加到右侧的末尾，方便查看。
• 上面的this.$nextTick方法，可以写在mounted里，当然如果你要把穿梭框放在弹出层里，那么就不要写在mouted里，建议写在弹出层触发打开的方法里（也就是弹出层visible = true的所在方法里）。