vue3+elementPlus+sortable.js实现表格行拖拽

npm install sortable.js

<template>
	<div class='process_container'>
		<el-table
			:data='state.dataList'
			class='draggable'
			border
			fit
			:header-cell-style='tableStyle.headerCellStyle'
			v-loading='loading'
			row-key='id'
			ref='dragTable'
		>
			<el-table-column type='index' label='#' width='60' />
			<el-table-column prop='sortId' label='序号' show-overflow-tooltip />
			<el-table-column prop='processName' label='工序名称' show-overflow-tooltip />
			<el-table-column prop='processCode' label='工序编码' show-overflow-tooltip />
		</el-table>
	</div>
</template>

注意：
row-key=‘xxx’ 必须设置

import Sortable, { SortableEvent } from 'sortablejs';

let loading = ref(false);
const state = reactive({
	queryForm: {
		matCode: 0,
	},
	dataList: [],
});

const loadProcessData = async () => {
	loading.value = true
	const { code, data } = await fetchList(state.queryForm);
	if (code === 0) {
		state.dataList = data.records;
		loading.value = false
        //该方法调用要在table数据拿到后
		rowDrag()
	}
};



// 行拖拽
const rowDrag = function () {
	// 要拖拽元素的父容器
	const tbody = document.querySelector(
		".draggable .el-table__body-wrapper tbody"
	);
	if (!tbody) return;
	Sortable.create(tbody as HTMLElement, {
		//  可被拖拽的子元素
		draggable: ".draggable .el-table__row",
		animation: 600,
		onEnd(event: SortableEvent) {
			if (event.oldIndex !== undefined && event.newIndex !== undefined) {
				const currRow = state.dataList.splice(event.oldIndex, 1)[0];
				state.dataList.splice(event.newIndex, 0, currRow);
				console.log(state.dataList)
			}
		},
	});
}