el-table列表排序通过name名称的首字母进行排序

`el-table` 是 Element UI 组件库中用于展示表格数据的一个组件。在 Element UI 中，可以通过设置表格的 `sortBy` 属性来指定一个字段名，以此来按照这个字段进行排序。若要实现按照某个字段名称的首字母进行排序，需要自定义排序逻辑。

一种实现方法是使用计算属性（computed property）来处理数据，先将名称字段转换为首字母，然后根据首字母进行排序。这里提供一个简单的示例，假设有一个 `el-table` 组件，其中有一个 `name` 字段需要按照首字母进行排序：

1. 在数据源中添加一个新字段，比如 `nameInitial`，用于存储每个 `name` 的首字母。
2. 在表格的 `sortBy` 属性中指定 `nameInitial` 字段进行排序。
3. 同时，需要在表格的 `sortMethod` 属性中指定一个排序方法，该方法会对 `nameInitial` 进行排序。

示例代码如下：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @sort-change="sortChange"
    :sort-method="sortMethod"
    border
    stripe
    :default-sort="{ prop: 'nameInitial', order: 'ascending' }"
  >
    <el-table-column prop="nameInitial" label="名称首字母" width="50"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 30 },
        { name: '李四', age: 24 },
        { name: '王五', age: 28 },
        // ... 其他数据项
      ],
    };
  },
  computed: {
    sortedData() {
      return this.tableData.sort((a, b) => {
        const nameInitialA = a.nameInitial.toUpperCase();
        const nameInitialB = b.nameInitial.toUpperCase();
        if (nameInitialA < nameInitialB) {
          return -1;
        }
        if (nameInitialA > nameInitialB) {
          return 1;
        }
        return 0;
      });
    },
  },
  methods: {
    sortChange({ prop, order }) {
      // 排序属性和顺序变化时的处理逻辑
    },
    sortMethod(a, b, prop) {
      return (a[prop] || '').localeCompare(b[prop]);
    },
  },
};
</script>

在这个示例中，`sortMethod` 方法将负责按照首字母进行比较。`sortBy` 属性将使用 `nameInitial` 字段进行排序。注意，这里使用了 `localeCompare` 方法来比较字符串，这是 JavaScript 中比较两个字符串的一种方法。