最近在项目中表格列表需要实现拖动排序,用到的是 sortable.js 这款插件,是一款优秀的js拖拽库,不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。可以用来拖拽div、table等元素。

安装:

npm install sortablejs

然后在 js 中引入这个插件:

import Sortable from "sortablejs"

表格加上 row-key 和 ref:

<el-table row-key="tableData" ref="singleTable" :data="list" style="width: 100%;">

注:row-key 写不正确可能会出现一些BUG,唯一就可以

具体实现:

mounted(){
	this.dragSort();
},
methods:{
	//表格拖动排序
	dragSort() {
		const el = this.$refs.singleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
		this.sortable = Sortable.create(el, {
			onEnd: e => {	//onEnd是结束拖拽时触发,onUpdate是列表内元素顺序更新的时候触发,更多请看文末配置项
				//e.oldIndex为拖动一行原来的位置,e.newIndex为拖动后新的位置
				const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
				this.tableData.splice(e.newIndex, 0, targetRow);
				let dragId = this.tableData[e.newIndex].id;//拖动行的id
				let oneId,twoId
				//拖动行的前一行
				if( this.tableData[e.newIndex-1]){
					oneId = this.tableData[e.newIndex-1].id;
				}else {
					oneId = ""
				}
				//拖动行的后一行
				if( this.tableData[e.newIndex+1]){
					twoId = this.tableData[e.newIndex+1].id;}
				else {
					twoId = ""
				}
				console.log("拖动行:"+dragId);
				console.log("前一行:"+oneId);
				console.log("后一行:"+twoId);
				//然后就可以发送请求了......
			}
		})
	}
					
}

配置项:

http://www.sortablejs.com/options.html 可以更改排序动画时间、自定义影子样式、指定拖动元素、多列表同组等等

其他:

如果使用的不是表格,而是以 v-for 的形式生成的动态数据,并且出现了排序混乱等BUG,可以尝试把数据源换成原本数据源的副本看看,注意不是基本类型要用深拷贝

Logo

前往低代码交流专区

更多推荐