vue3+element-plus+Sortable 实现列拖拽功能

实现列拖拽功能可以使用 SortableJS 库，并结合 Element Plus 的表格组件和 Vue3 的响应式数据。

首先需要在项目中安装 SortableJS：

npm install sortablejs --save

然后在需要使用的组件中引入 SortableJS 和 Element Plus 的表格组件：

import Sortable from 'sortablejs';
import { ElTable, ElTableColumn } from 'element-plus';

接着，在组件中定义表格数据和表格列，以及拖拽回调函数：

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20, address: 'New York' },
        { name: 'Tom', age: 25, address: 'London' },
        { name: 'Lucy', age: 18, address: 'Paris' },
        { name: 'Lily', age: 22, address: 'Tokyo' }
      ],
      tableColumns: [
        { label: 'Name', prop: 'name' },
        { label: 'Age', prop: 'age' },
        { label: 'Address', prop: 'address' }
      ]
    };
  },
  mounted() {
    // 绑定拖拽回调函数
    const el = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody');
    Sortable.create(el, {
      animation: 150,
      onEnd: evt => {
        const { newIndex, oldIndex } = evt;
        const item = this.tableColumns.splice(oldIndex - 1, 1)[0];
        this.tableColumns.splice(newIndex - 1, 0, item);
      }
    });
  },
  render() {
    return (
      <ElTable ref="table" data={this.tableData}>
        {this.tableColumns.map(column => (
          <ElTableColumn label={column.label} prop={column.prop}></ElTableColumn>
        ))}
      </ElTable>
    );
  }
};

这里使用 `Sortable.create` 方法创建一个拖拽对象，并且绑定了 `onEnd` 回调函数，当拖拽结束后，将表格列数组中的相应元素移动到新位置。

最后渲染表格时，使用 `map` 方法动态创建表格列。

这样就实现了列拖拽功能。