解决vue elementUI中table里数字、字母、中文混合排序问题

想要解决Vue ElementUI中的Table里数字、字母、中文混合排序问题，我们需要引入一个第三方库：pinyin。pinyin可以将汉字转换成拼音，这可以帮助我们对含有中文的字符串进行排序。

下面是解决这一问题的完整攻略：

安装pinyin

在终端中输入以下命令进行pinyin的安装：

npm install pinyin --save

对Table数据进行处理

在Vue组件中对含有中文的数据进行处理，将中文转换成对应的拼音并添加一个名为pinyin的属性。在这个属性中，我们将会存储转换后的拼音。

import Pinyin from 'pinyin';

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25 },
        { name: '李四', age: 20 },
        { name: '王五', age: 30 }
      ]
    };
  },
  created() {
    this.tableData.forEach(item => {
      // 将中文名字转换成拼音，并添加一个pinyin属性
      item.pinyin = Pinyin(item.name, {
        style: Pinyin.STYLE_FIRST_LETTER
      }).join('');
    });
  }
}

在这个代码中，我们将pinyin引入，并在Vue组件的created生命周期中对数据进行处理。我们通过调用pinyin方法，并传入每个数据对象中含有中文的属性名和一个拼音转换参数，将每个数据对象中含有中文的属性转换成对应的拼音，并存储在一个新的pinyin属性中。

在这里我们参考了pinyin的GitHub页面来学习如何使用该库。

实现Table的排序功能

在Table组件中将排序方法设置为一个自定义的方法，然后在点击表头的时候调用该方法。

<el-table :data="tableData" :sort-method="sortTableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

在这个代码中，我们为Table组件设置了一个sort-method属性，并将其设置为与组件同名的方法sortTableData。当表头被点击时，该方法将被调用。

下面是sortTableData方法的实现：

sortTableData(data, sortParams) {
  const { prop, order } = sortParams;
  const ascendOrDescend = (order === 'asc') ? -1 : 1;

  return data.sort((a, b) => {
    const first = a.pinyin;
    const second = b.pinyin;

    if (first > second) {
      return 1 * ascendOrDescend;
    } else if (first < second) {
      return -1 * ascendOrDescend;
    } else {
      return 0;
    }
  });
}

在这个方法中，我们首先获取了排序参数和排序方式，将其存储在变量prop和order中。我们通过将升序排序乘以-1，便可以将其变为降序排序。

接着，我们使用Array.sort()方法对拥有pinyin属性的数据数组进行排序。如果pinyin属性第一个数据的值大于第二个数据的值，就按照order的值将它们排列。如果第二个数据的值大于第一个数据的值，同样进行排列。如果两个值相同，则返回0。

现在你已经有了一个可排序的Table，其会将含有中文数据的属性转换成拼音，并默认按照拼音排序。如果你需要按照其他的属性进行排序，只需在sort-method属性中使用不同的方法即可。

接下来是一个有中文、拼音和数字数据的示例：

this.tableData = [
  { name: '张三', age: 25, address: '北京', phone: '187*****51' },
  { name: 'baby', age: 20, address: '上海', phone: '131*****45' }, 
  { name: 'lihua', age: 31, address: '深圳', phone: '138*****12' },
  { name: '李四', age: 22, address: '广州', phone: '187*****92' }, 
  { name: 'John', age: 28, address: '美国', phone: '+19272*****' }
];

我们需要对name属性进行排序。以下是结果：

排序前：