html代码

<div class="btn">
					<el-button :icon="Back" @click="goBack">返回</el-button>
					<el-button type="primary" :icon="Position" @click="comfigSort">确认排序</el-button>

					<el-button type="info" :icon="Refresh" @click="unsort">取消排序</el-button>
				</div>
				<el-table class="t1" ref="dragTable" :data="tableData" row-key="id" border :row-class-name="tableRowClassName">
					<el-table-column prop="sortNum" label="排序值"></el-table-column>
					<el-table-column prop="sysId" label="平台ID"></el-table-column>
					<el-table-column prop="sysName" label="平台名称"></el-table-column>
					<el-table-column prop="sysCode" label="系统编码">
						<template #default="scope">
							<el-button class="move" type="text" size="small">{{ scope.row.sysCode }}</el-button>
						</template>
					</el-table-column>
                                        </el-table>

js

import { onMounted, toRefs, reactive, getCurrentInstance } from "vue";
import Sortable from "sortablejs";
import { Back, Position, Refresh, SuccessFilled } from "@element-plus/icons-vue";
import { MyList } from "@/api/interface/apply";
import { myList, sortMy } from "@/api/modules/apply";
import { useRouter } from "vue-router";

const router = useRouter();
const { proxy } = getCurrentInstance() as any;
const status = reactive({
	tableData: [{} as MyList],
});

const { tableData } = toRefs(status);
const getData = () => {
	myList().then(res => {
		tableData.value = res.data;
	});
};
	

// 创建sortable实例
const initSortable = (className: any) => {
	// 获取表格row的父节点
	const table = document.querySelector("." + className + " .el-table__body-wrapper tbody") as HTMLElement;
	// 创建拖拽实例
	new Sortable(table, {
		animation: 150, //动画
		// 开始拖动事件
		onStart: () => {
			// console.log("开始拖动", tableData.value);
		},
		// 结束拖动事件
		onEnd: (evt: any) => {
			tableData.value.splice(evt.newIndex, 0, tableData.value.splice(evt.oldIndex, 1)[0]);
			const newArray = tableData.value.slice(0);
			tableData.value = [];
			nextTick(() => {
				tableData.value = newArray;
			});
		}
	});
};

// 设置表格row的class
const tableRowClassName = (row: any) => {
	if (row.disabled) {
		return "disabled";
	}
	return "";
};
const goBack = () => {
	router.go(-1);
};
const comfigSort = () => {
	sortMy({
		sysCodeList: sysCodeList.value
	}).then(res => {
		goBack();
	});
};
const unsort = () => {
	getData();
};
onMounted(() => {
	getData();
	initSortable("t1");
});

css

.sortContent {
	padding: 15px;
	.infoText {
		background-color: #f0f9eb;
		color: #67c23a;
		padding: 10px;
		margin-bottom: 5px;
		font-size: 13px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn {
		margin-bottom: 5px;
	}
}