vxe-table defaultSort

VxeTable是Vue生态系统中一款强大的表格组件，它来自于Vuetify Easy Element套件(vxe-element)。`defaultSort`属性是VxeTable的一个配置项，用于设置默认的排序规则。当你首次渲染表格时，如果没有手动指定列的排序，那么这个属性就决定了哪一列将默认处于排序状态，以及排序的方向（升序或降序）。

例如，你可以像这样配置：

<vxe-table :data="tableData" :defaultSort="{ prop: 'name', order: 'asc' }">
  <!-- 表格列定义 -->
</vxe-table>

在这个例子中，`name`列会默认按照升序排序。

相关问题

vxe-table 使用sort-by

vxe-table 是一款基于 Vue.js 的高效、灵活的表格组件。sort-by 是 vxe-table 的一个排序配置项，可以用于设置表格中的某一列是否支持排序，以及排序的规则。

使用 sort-by 首先需要在表格的 column 配置中设置 sortable: true，然后在该列的属性中设置 sort-by 属性。sort-by 属性可以是一个字符串，也可以是一个函数。如果是字符串，表示按照该字段进行排序；如果是函数，需要返回一个用于排序的值。

下面是一个简单的例子：

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, score: 80 },
        { name: '李四', age: 30, score: 70 },
        { name: '王五', age: 28, score: 90 }
      ],
      columns: [
        { title: '姓名', key: 'name', sortable: true },
        { title: '年龄', key: 'age', sortable: true },
        { title: '分数', key: 'score', sortable: true, sortBy: 'score' }
      ]
    }
  }
}
</script>

在上面的例子中，第三列设置了 sort-by 属性为 'score'，表示按照分数进行排序。

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