简单vue指令实现 el-table 可拖拽表格功能

詹姆斯bind2024-10-01 18:17

安装 SortableJS

sorttableJs 相关优点如下：

javascript 复制代码

pnpm i sortablejs

封装成指令

不多逼逼，直接上才艺 🤪🤪🤪

先安装一个 nanoid 插件用于生成随机id，注意事项看源码。

javascript 复制代码

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 放心拿去造吧🤭

javascript 复制代码

 <el-table
          v-sort-table="$editItem.props"
          :data="$editItem.props"
 </el-table>