用Sortable.js实现VXE-Table中表头的可拖拽排序以及结果保存到后端

前言

在许多数据表格的应用场景中，用户通常需要对表头进行排序操作。使用Sortable.js库可以轻松地为VXE-Table表头添加可拖拽排序的功能，并将其排序后的数据保存到后端服务器中。此外，还可以让不同的用户在系统中自定义表头的排序方式，以满足不同的业务需求。

实现步骤

1. 安装依赖

首先，你需要安装Sortable.js和VXE-Table依赖包。你可以使用以下命令来安装它们：

npm install sortablejs vxe-table

2. 配置VXE-Table

在你的Vue组件中，你需要导入Sortable.js和VXE-Table，并将其注册为Vue组件。你可以在main.js文件中进行如下配置：

import Sortable from 'sortablejs';
import VXETable from 'vxe-table';

Vue.use(VXETable);
Vue.use(Sortable);

3. 创建VXE-Table实例

接下来，你需要在你的Vue组件中创建VXE-Table实例。你可以使用如下代码来创建VXE-Table实例：

<template>
  <div>
    <vxe-table
      ref="table"
      :columns="columns"
      :data="data"
      :sort-config="sortConfig"
    />
  </div>
</template>

<script>
import { Sortable } from 'sortablejs';

export default {
  data() {
    return {
      columns: [
        { field: 'id', title: 'ID' },
        { field: 'name', title: 'Name' },
        { field: 'age', title: 'Age' },
      ],
      data: [
        { id: 1, name: 'John Doe', age: 25 },
        { id: 2, name: 'Jane Smith', age: 30 },
        { id: 3, name: 'Michael Jones', age: 35 },
      ],
      sortConfig: {
        field: 'id',
        order: 'asc',
      },
    };
  },
  mounted() {
    // 获取表头元素
    const header = this.$refs.table.$refs.header;

    // 将表头元素转换为Sortable实例
    Sortable.create(header, {
      draggable: '.vxe-header--column',
      onEnd: (evt) => {
        // 获取拖拽后的表头列
        const column = evt.item.dataset.column;

        // 获取拖拽后的表头顺序
        const order = evt.newIndex;

        // 更新表头顺序
        this.columns.splice(order, 0, this.columns.splice(evt.oldIndex, 1)[0]);

        // 更新排序配置
        this.sortConfig.field = column;
        this.sortConfig.order = 'asc';
      },
    });
  },
};
</script>

4. 保存排序数据到后端

当用户对表头进行排序后，你需要将排序后的数据保存到后端服务器中。你可以使用以下代码来实现：

// 调用后端接口保存排序数据
axios.post('/api/save-sort-config', {
  sortConfig: this.sortConfig,
});

5. 不同用户自定义排序

要让不同的用户在系统中自定义表头的排序方式，你可以使用localStorage或数据库来存储每个用户的排序配置。当用户登录系统时，你可以从localStorage或数据库中读取该用户的排序配置，并将其应用到VXE-Table中。

总结

通过使用Sortable.js库，你可以轻松地为VXE-Table表头添加可拖拽排序的功能，并能够将排序后的数据保存到后端服务器中。此外，你还可以让不同的用户在系统中自定义表头的排序方式，以满足不同的业务需求。