ant design vue 1.7.8版本怎么实现表格拖拽换行功能

Question

项目里面使用到vue2，但是ant design vue版本还是一版本，所以不会写，版本过低怎么进行表格拖拽功能。

Answer 1

1.安装 sortablejs 插件。
使用 npm 安装 sortablejs 插件：

npm install sortablejs --save

在组件中引入 sortablejs 插件。
在组件中引入 sortablejs 插件：

import Sortable from 'sortablejs';

在表格上添加 ref 属性。
在表格上添加 ref 属性，以便在组件代码中引用该表格。

<Table
  ref="table"
  :columns="columns"
  :dataSource="dataSource"
  ...
/>

在表格渲染后初始化 sortable 对象。
在表格渲染后使用 this.$nextTick() 获取到表格的 DOM 元素并初始化 sortable 对象。

mounted() {
  this.$nextTick(() => {
    const el = this.$refs.table.$el.querySelector('.ant-table-tbody');
    const sortable = new Sortable(el, {
      draggable: 'tr',
      handle: '.ant-table-draggable-handle',
      onEnd: this.handleDragEnd // 拖拽结束时的回调函数
    });
  });
},

其中 draggable 属性表示可以被拖拽的元素，这里为表格中的 tr；handle 属性表示拖拽的手柄元素，这里为表格中的 .ant-table-draggable-handle 类；onEnd 属性表示拖拽结束时的回调函数，这里为 handleDragEnd。

实现拖拽结束时的回调函数。
在组件中定义 handleDragEnd 方法，用于在拖拽结束时更新数据源（dataSource）。

methods: {
  handleDragEnd(event) {
    const oldIndex = event.oldIndex;
    const newIndex = event.newIndex;

    // 更新数据源
    const newData = [...this.dataSource];
    const [removed] = newData.splice(oldIndex, 1);
    newData.splice(newIndex, 0, removed);

    this.dataSource = newData;
  }
}