简单vue指令实现 el-table 可拖拽表格功能
安装 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 key
const 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-table
v-sort-table="$editItem.props"
:data="$editItem.props"
</el-table>