Vue3 elementPlus el-table 拖拽排序

//首先给el-table 加上class="elTable"
 

//导入sortablejs
import Sortable from 'sortablejs';

//调用 initSort ()
onMounted(() => {
    initSort ()
})

// 创建拖拽实例
const initSort = () => {
	const table = document.querySelector(".elTable .el-table__body-wrapper tbody");
	//const table = document.querySelector(`.${className} .el-table__body-wrapper tbody`);
	Sortable.create(table, {
		group: 'shared',
		animation: 150,
		ghostClass: 'sortable-ghost', //拖拽样式
		easing: 'cubic-bezier(1, 0, 0, 1)',
		onStart: (item: any) => {
			console.log(item);
		},

		// 结束拖动事件
		onEnd: (item: any) => {
			console.log(item);
			setNodeSort(item.oldIndex, item.newIndex)
		},
	})
}

// 拖拽完成修改数据排序
const setNodeSort = (oldIndex: any, newIndex: any) => {
	
	const arr = state.fieldData;
	console.log(arr);
	const currentRow = arr.splice(oldIndex, 1)[0]
	arr.splice(newIndex, 0, currentRow )
	state.fieldData = [];
	nextTick(async () => {
		state.fieldData = arr;
		for (let index = 0; index < state.fieldData.length; index++) {
			const element = state.fieldData[index];
			element.OrderBy = index + 1;
			//console.log(element.FieldName + "========" + element.OrderBy);
		}
		//提交后后台数据进行排序
		await Api().DbOrderBy(state.fieldData);
	});
}