Vue3: 给表格多个字段添加排序功能

问题

• 在Vue3项目中，使用element-plus的表格组件绘制表格后，需要令表格的多个字段可以进行选择排序（选择升序或者降序）
• 但是排序功能好像有时候会出错，需要排序的字段多了之后，排序功能有时候会不起作用

解决

• 给表格设置sort-method 属性，并绑定一个方法，该方法与表格的排序功能有关

• 排序函数
  给数字类型的字段排序，使用减法运算符来进行数字大小排序

排序函数的代码：

// 表格多字段排序
function sortTable() {
  const { prop, order } = sortObj;
  return this.tableData.sort((a, b) => {
    if (order === "ascending") {
      if (prop === "study") {
        return a.study - b.study;
      } else if (prop === "visit") {
        return a.visit - b.visit;
      } else if (prop === "date") {
        return a.date - b.date;
      }
    } else if (order === "descending") {
      if (prop === "study") {
        return b.study - a.study;
      } else if (prop === "visit") {
        return b.visit - a.visit;
      } else if (prop === "date") {
        return b.date - a.date;
      }
    }

    return 0;
  });
}

其他

参考文章

小插曲

• 因为在项目中，涉及到的数字比较大，所以给数字添加了分隔符：每三位数添加一个逗号；比如数字1897645，最后的呈现形式是1,897,645
• 即数据最后的数据类型已经变成了字符串类型，但是当时在添加排序功能的时候没注意到这一点，导致排序的结果一直不对
• 因此记录一下，仅供参考~