vue2 ant design vue拖动列

可以使用 `ant-design-vue` 的 `Table` 组件来实现拖动列的功能。

首先，在表格组件中添加 `row-key` 属性，用于指定每行数据的唯一标识。

然后，在表格组件中添加 `customRow` 属性，用于自定义行的渲染方式。在自定义行渲染函数中，可以使用 `draggable` 属性来设置列是否可拖动。

最后，监听 `onRow` 事件，在拖动结束后，可以获取到新的列顺序，并将其保存起来。

以下是示例代码：

<template>
  <a-table :columns="columns" :data-source="dataSource" row-key="id" :custom-row="customRow" @row="handleRow"></a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', dataIndex: 'name', key: 'name', draggable: true },
        { title: '年龄', dataIndex: 'age', key: 'age', draggable: true },
        { title: '地址', dataIndex: 'address', key: 'address', draggable: true },
      ],
      dataSource: [
        { id: 1, name: '张三', age: 18, address: '北京市' },
        { id: 2, name: '李四', age: 20, address: '上海市' },
        { id: 3, name: '王五', age: 22, address: '广州市' },
      ],
    };
  },
  methods: {
    customRow(record, index, event) {
      return {
        on: {
          dragstart: (event) => {
            event.dataTransfer.setData('text/plain', index);
            event.dataTransfer.effectAllowed = 'move';
          },
        },
        attrs: {
          draggable: record.draggable,
        },
      };
    },
    handleRow(record, index) {
      return {
        on: {
          drop: (event) => {
            event.preventDefault();
            const sourceIndex = event.dataTransfer.getData('text/plain');
            if (sourceIndex !== index) {
              const newData = [...this.dataSource];
              const sourceRecord = newData.splice(sourceIndex, 1)[0];
              newData.splice(index, 0, sourceRecord);
              this.dataSource = newData;
            }
          },
          dragover: (event) => {
            event.preventDefault();
          },
        },
      };
    },
  },
};
</script>

在上面的示例代码中，我们使用 `draggable` 属性来设置每列是否可拖动，使用 `customRow` 属性来自定义行的渲染方式，使用 `onRow` 事件来监听拖动事件，并在拖动结束后更新数据源中的数据。