vxe-table行拖动排序

好的，关于vxe-table行拖动排序，你可以按照以下步骤进行操作：

1. 在表格组件中添加`sortable`属性，开启排序功能。
2. 在表格列中添加`sortable`属性，指定该列可排序。
3. 在表格组件中添加`row-drag`属性，开启行拖动功能。
4. 在表格组件中添加`row-drag-sorting`属性，开启行拖动排序功能。

具体实现代码如下：

<vxe-table :data="tableData" :sortable="true" :row-drag="true" :row-drag-sorting="true">
  <vxe-table-column type="index" width="60"></vxe-table-column>
  <vxe-table-column field="name" title="姓名" sortable></vxe-table-column>
  <vxe-table-column field="age" title="年龄" sortable></vxe-table-column>
  <vxe-table-column field="address" title="地址"></vxe-table-column>
</vxe-table>

相关问题

vue3 vxe-table 行拖拽排序

VxeTable 是 Vue3 中的一个强大的表格组件，它来自 Vuetify 组件库的扩展，支持丰富的功能，包括行拖拽排序。在 VxeTable 中，你可以通过集成它的内置 API 来实现在表格中的行之间的拖放排序。

要实现行拖拽排序，你需要做以下几个步骤：

1. 首先，在你的 VxeTable 的配置选项中启用 `sortable` 属性，并指定 `sort` 或者 `indexField`，这将用于确定哪一列可以用于排序，以及如何获取每个行的索引或排序依据字段。

<template>
  <vxe-table :data="tableData" :sortable="{ multiple: true }">
    <!-- 其他列定义 -->
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ],
    };
  },
};
</script>

2. 然后，当用户开始拖动一行时，你可以监听 `@sort-start` 事件，获取被拖动行的信息。同时，保存当前的排序状态。

3. 用户释放鼠标时，触发 `@sort-end` 事件，这时处理实际的数据交换操作。根据 `source` 和 `target` 参数，找到原始位置和目标位置，交换数据列表中对应位置的数据。

methods: {
  handleSortStart(source, target) {
    this.originalOrder = JSON.parse(JSON.stringify(this.tableData));
  },
  handleSortEnd(source, target) {
    const temp = this.tableData[source.index];
    this.tableData.splice(source.index, 1);
    this.tableData.splice(target.index, 0, temp);
  },
},

4. 别忘了清除之前保存的状态，以便下一次拖拽排序：

beforeDestroy() {
  this.originalOrder = null;
},

vxe-table 拖拽排序

vxe-table提供了拖拽排序的功能，可以通过拖拽表格行来改变它们的顺序。下面是一个演示如何使用vxe-table实现拖拽排序的例子：

<template>
  <div>
    <vxe-table
      ref="table"
      :data="tableData"
      :columns="columns"
      :sortable="true"
      @sort-change="handleSortChange"
    ></vxe-table>
  </div>
</template>

<script>
import 'vxe-table/lib/style.css';
import { VXETable } from 'vxe-table';

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Mike', age: 25 },
        { id: 3, name: 'Tom', age: 30 },
        { id: 4, name: 'Jerry', age: 35 },
      ],
      columns: [
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: 'Name', width: 120 },
        { field: 'age', title: 'Age', width: 80 },
      ],
    };
  },
  mounted() {
    VXETable.setup({
      table: {
        mouseConfig: {
          selected: true,
          checked: true,
          checkedByClickRow: true,
          checkedByCell: true,
        },
      },
    });
  },
  methods: {
    handleSortChange({ column, order }) {
      const { table } = this.$refs;
      table.sort(column.field, order);
    },
  },
};
</script>

在上面的例子中，我们使用了vxe-table的`sortable`属性来启用拖拽排序功能。当用户拖拽表格行时，`sort-change`事件会被触发，我们可以在事件处理函数中调用`table.sort`方法来实现排序。