济宁网站建设哪家好,房地产要崩塌了,网站做qq链接,网站建设的项目说明书需求是实现Transfer 穿梭框选中的数据列表#xff0c;可以拖拉拽进行排序功能。 主要是使用到了sortablejs插件。
首先安装sortablejs
npm install sortablejs --save再使用的vue文件中引用插件
el-transfer reftransfer v-modelform :data可以拖拉拽进行排序功能。 主要是使用到了sortablejs插件。
首先安装sortablejs
npm install sortablejs --save再使用的vue文件中引用插件
el-transfer reftransfer v-modelform :datagroupModalList:titles[未选, 已选]changetransferListtarget-orderpush/el-transferimport Sortable from sortablejsdata () {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的所在方法里。
