需求是实现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.$elconst 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 } = evtconsole.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的所在方法里）。