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>

相关问题

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`方法来实现排序。

vxe-table 列拖动排序

vxe-table 是一个基于 Vue.js 的表格组件库，它提供了丰富的表格功能，包括列拖动排序。

要实现列拖动排序，你需要使用 vxe-table 的 sortable 属性。sortable 可以接受一个对象或者一个数组作为值。对象中可以指定哪些列是可以排序的，哪些是不可以排序的，以及默认的排序方式。数组中可以按照顺序指定哪些列是可以排序的。

下面是一个示例：

<template>
  <vxe-table :data="tableData" :columns="columns" :sortable="sortable"></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, gender: 'Male' },
        { name: 'Jane', age: 30, gender: 'Female' },
        { name: 'Bob', age: 20, gender: 'Male' },
        { name: 'Alice', age: 35, gender: 'Female' }
      ],
      columns: [
        { field: 'name', title: 'Name', sortable: true },
        { field: 'age', title: 'Age', sortable: true },
        { field: 'gender', title: 'Gender', sortable: false }
      ],
      sortable: { defaultSort: { field: 'age', order: 'desc' } }
    }
  }
}
</script>

在这个示例中，我们将 sortable 设置为一个对象，其中 defaultSort 指定了默认的排序方式为按照 age 降序排序。同时，name 和 age 列都可以进行排序，而 gender 列不可以进行排序。

当用户拖动列头时，vxe-table 会自动调整列的顺序，并且重新排序表格数据。你可以在控制台输出 tableData，查看排序后的结果。