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

问题

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

解决

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

Vue3: 给表格多个字段添加排序功能_第1张图片

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

Vue3: 给表格多个字段添加排序功能_第2张图片

排序函数的代码:

// 表格多字段排序
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
  • 即数据最后的数据类型已经变成了字符串类型,但是当时在添加排序功能的时候没注意到这一点,导致排序的结果一直不对
  • 因此记录一下,仅供参考~

你可能感兴趣的:(Javascript,vue,element,ui,vue3,el-table,element-plus,表格字段排序)