vue3.0 + antdesgin vue+ts 实现table表格的拖拽排序

vue3.0 + antdesgin vue+ts 实现table表格的拖拽排序

效果图：

1、npm install sortablejs --save
2、import Sortable from ‘sortablejs’;

   <a-table
        class="sort-table-content"
        :columns="columns"
        bordered
        rowKey="id"
        :loading="loading"
        :data-source="tableData"
        :scroll="{ y: 'calc(100vh - 250px)' }"
        :pagination="false"
        size="small"
        v-if="tableData.length"
        :defaultExpandAllRows="true"
      >
        <template #action="{ record }">
          <a-button type="link" @click="handleOk('addSubMenu', '', '', record)"
            >新增子菜单</a-button
          >
          <a-button type="link" style="color: red" @click="delect('Menu', record.id)"
            >删除</a-button
          >
        </template>
        <template #expand>
          <a-button type="link" @click="handleDragClick"
            >{{ !enableDrag ? '拖动排序' : '取消拖动' }}
          </a-button>
        </template>
        <template #dragHandle>
          <MenuOutlined :style="iconStyle" />
        </template>
        <template #isDisplay="{ record }">
          {{ record.isDisplay ? '显示' : '隐藏' }}
        </template>
      </a-table>
      <!-- 空表格 表格数据length为0时展示空表格 -->
      <a-table
        class="sort-table-content"
        :columns="columns"
        bordered
        rowKey="id"
        :loading="loading"
        :data-source="tableData"
        :scroll="{ y: 'calc(100vh - 250px)' }"
        :pagination="false"
        size="small"
        v-if="tableData.length === 0 || null"
        :defaultExpandAllRows="true"
      >
        <template #expand>
          <a-button type="link" @click="handleDragClick"
            >{{ !enableDrag ? '拖动排序' : '取消拖动' }}
          </a-button>
        </template>
      </a-table>

2、在获取到表格数据后调用拖拽方法

3、

 //拖拽
  //拖拽
    function sortMenuTable() {
      let el: any = document.querySelectorAll(
        '.sort-table-content>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-content>.ant-table-scroll>.ant-table-body>table > tbody'
      )[0];
      var sort = Sortable.create(el as any, {
        ghostClass: 'sortable-ghost',
        setData: function (dataTransfer: any) {
          dataTransfer.setData('Text', '');
        },
        onMove: function (evt: any, originalEvent: any) {
          if (!enableDrag.value) return false;
          else return true;
        },
        onEnd: (evt: any) => {
          if (evt.oldIndex === evt.newIndex) return;
          let state = evt.oldIndex > evt.newIndex ? 'before' : 'after';
          let newMenu = orderList.value[evt.newIndex].id;
          let oldMenu = orderList.value[evt.oldIndex].id;
          if (orderList.value[evt.newIndex].parentId !== orderList.value[evt.oldIndex].parentId) {
            message.warning('只支持同父级排序');
            getMenuListFn(systemId.value);
          } else {
            sortChange(newMenu, oldMenu, state);
          }
        },
      });
    }
    //排序调接口
    async function sortChange(newMenu: string, oldMenu: string, state: string) {
      let param = {
        clickId: oldMenu, //操作id
        letId: newMenu, //基准id
        status: state, //操作类型
      };
      let res = await subSysApi.sortSubsystem(param);
      if (!res) {
        return;
      }
      if (res?.success) {
        message.success(res.msg);
        getMenuListFn(systemId.value);
      } else {
        message.error(res.msg);
        getMenuListFn(systemId.value);
      }
    }

    //处理数据
    function getOrderList(list: Array<object>) {
      orderList.value = []; //需要清空一下数据，否则是一直push
      for (let i of list) {
        getOlderChild(i);
      }
    }
    function getOlderChild(item: any) {
      orderList.value.push(item);
      if (item.children) {
        for (let i of item.children) {
          getOlderChild(i);
        }
      }
    }