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