vue基于sorttable 封装可拖拽表格hook，支持自定义和el-table

本文链接：https://blog.csdn.net/Centenario_0/article/details/142658041

安装 SortableJS

sorttableJs 相关优点如下：
在这里插入图片描述

pnpm i sortablejs

封装成hook

不多逼逼，直接上才艺 🤪🤪🤪
先安装一个 nanoid 插件用于生成随机id，注意事项看源码。

import { ref, nextTick, watchEffect, onUnmounted } from 'vue';
import Sortable from 'sortablejs';
import { nanoid } from 'nanoid';

type SortOptions = {
  type?: string; // 表格类型：'el-table' | 'custom-table' , 默认 'el-table'
  handle?: string; // 拖拽元素class , 默认 '.el-table__row'
};

/**
 * 可拖拽表格 支持 el-table 或 自定义表格, 默认el-table, https://sortablejs.github.io/Sortable/
 * el-table 需添加属性 row-key="id"
 * @param options
 * @returns
 */
export const useDragTable = (options?: SortOptions) => {
  // 可拖拽表格容器
  const dragWrapperRef = ref();

  // 拖拽数据key，用于动态拖拽数据更新后触发初始化
  const dragDataKey = ref('');

  // 拖拽数据
  const dragData = ref<any[]>([]);

  // Sortable实例
  let dragTableInstance: any;

  // 初始化
  const initSortable = () => {
    if (!dragData.value || !dragWrapperRef.value) return;
    const el = options?.type && options.type === 'custom-table' ? dragWrapperRef.value : dragWrapperRef.value.$el.querySelector('.el-table__body-wrapper tbody');
    const handle = options?.handle ? options.handle : '.el-table__row';
    const sortable = Sortable.create(el, {
      animation: 100,
      handle,
      onEnd(evt) {
        const { oldIndex, newIndex } = evt;
        const movedItem = dragData.value.splice(oldIndex!, 1)[0];
        dragData.value.splice(newIndex!, 0, movedItem);
        dragData.value.forEach((item) => {
          if (!item.id) {
            item.id = nanoid(8);
          }
        });
      },
    });

    return sortable;
  };

  watchEffect(() => {
    if (dragDataKey.value && dragTableInstance) {
      dragTableInstance.destroy();
    }
    nextTick(() => {
      dragTableInstance = initSortable();
    });
  });

  onUnmounted(() => {
    if (dragTableInstance) {
      dragTableInstance.destroy();
    }
  });

  return {
    dragWrapperRef,
    dragDataKey,
    dragData,
  };
};

使用

ok 放心拿去造吧🤭


import { useDragTable } from '@/hooks/useDragTable';
// 初始化可拖拽表格
const { dragWrapperRef, dragDataKey, dragData } = useDragTable();
 <el-table
 		  ref="dragWrapperRef"		
          v-sort-table="$editItem.props"
          :data="$editItem.props"
 </el-table>