Vue3 中使用 vxe-table 首列跟据首字母按照0-9a-zA-Z的排序规则进行排序

在Vue3中使用vxe-table进行首字母排序可以按照以下步骤进行：

1. 安装vxe-table

npm install vxe-table@next --save

2. 导入vxe-table

import 'vxe-table/lib/style.css';
import VXETable from 'vxe-table';
import 'xe-utils';
import VXETablePluginElement from 'vxe-table-plugin-element';

3. 注册vxe-table

app.use(VXETable);
app.use(VXETablePluginElement);

4. 在table中使用column.sortMethod属性来指定排序方法

<vxe-table :data="tableData">
  <vxe-table-column field="name" title="Name" :sortable="true" :sort-method="sortByName"></vxe-table-column>
  <vxe-table-column field="age" title="Age" :sortable="true"></vxe-table-column>
</vxe-table>

5. 在组件中定义sortByName方法来实现按照首字母排序

export default {
  data() {
    return {
      tableData: [
        { name: 'Adam', age: 25 },
        { name: 'Bob', age: 30 },
        { name: 'Cindy', age: 20 },
        { name: 'David', age: 35 },
        { name: 'Emily', age: 28 },
      ],
    };
  },
  methods: {
    sortByName(sortParams) {
      return sortParams.sortList.sort((a, b) => {
        const getValue = (row) => {
          let value = row.name;
          if (!value) {
            value = '';
          }
          return value.toLowerCase();
        };
        let sortValue = 0;
        const valueA = getValue(a);
        const valueB = getValue(b);
        if (valueA > valueB) {
          sortValue = 1;
        } else if (valueA < valueB) {
          sortValue = -1;
        }
        return sortParams.order === 'desc' ? -sortValue : sortValue;
      });
    },
  },
};

此时，vxe-table会按照首字母顺序对表格数据进行排序。需要注意的是，如果表格数据中存在空值，需要将空值转换为一个可比较的值，否则可能会出现排序错误的情况。