ant-design-vue vue2 表格拖动某一个标识实现行拖拽排序

Ant Design Vue 的表格组件提供了丰富的功能，包括行拖拽排序。在 Vue2 中，你可以利用 `AntdTable` 组件结合 `draggable` 和 `resizable` 这两个官方提供的拖拽属性，以及自定义事件处理来实现这一功能。

首先，在组件的列配置中设置列为可拖动：

<template>
  <a-table :columns="columns" :data-source="tableData" @on-drag-end="handleDragEnd"></a-table>
</template>

<script>
import { Table, Column } from 'ant-design-vue';

export default {
  components: {
    Table,
  },
  data() {
    return {
      columns: [
        // ...其他列配置
        {
          title: '拖拽列',
          dataIndex: 'dragColumn',
          draggable: true, // 设置为可拖动
          resizable: { type: 'fixed', size: 80 }, // 可调整大小
        },
      ],
      tableData: [], // 数据源数组
    };
  },
  methods: {
    handleDragEnd(e) {
      const { oldIndex, newIndex } = e;
      // 根据事件中的索引信息，对数据源进行排序
      this.tableData.sort((item1, item2) => oldIndex - newIndex);
      // 更新表格视图
      this.$nextTick();
    },
  },
};
</script>

在这个例子中，当用户完成拖拽操作后，`handleDragEnd` 方法会被触发，它会根据新的索引位置更新数据源的顺序，并通过 `$nextTick` 确保视图在数据更新之后同步渲染。