安装 SortableJS
sorttableJs 相关优点如下：
相关配置项 参考 👉 SortableJS中文官网
pnpm i sortablejs
封装成指令
不多逼逼，直接上才艺 🤪🤪🤪
先安装一个 nanoid 插件 用于生成随机id，注意事项看源码。
import { nanoid } from 'nanoid';
import Sortable from 'sortablejs';/*** 可拖拽表格指令* 使用方式，el-table 标签上添加 v-sort-table="tableData" ,tableData: 表格数据* 注意： el-table 要指定 row-key='id' id 字段为指令内部生成* 插件：https://sortablejs.com/*/export default {name: 'sortTable',mounted(el: HTMLElement, binding: { value: Array<any> }) {const data = binding.value.map((i) => ({ id: nanoid(8), ...i })); // 处理表格原始数据生成id keyconst targetEl = el.querySelector('.el-table__body-wrapper tbody') as HTMLElement;if (targetEl) {Sortable.create(targetEl, {onEnd(evt) {const { oldIndex, newIndex } = evt;const movedItem = data.splice(oldIndex as number, 1)[0];data.splice(newIndex as number, 0, movedItem);},});}},
};
使用
ok 放心拿去造吧🤭
<el-tablev-sort-table="$editItem.props":data="$editItem.props"</el-table>
