鸿星尔克网络营销案例分析_制作网页图片_大数据精准营销_海淀区seo引擎优化

安装 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>