一.需求
表格中数字汉字排序，数字按大小排列，汉字按拼音首字母（A-Z）排序。
二.用到的方法
-
第一步：把el-table-column上加上sortable="custom"
<el-table-column prop="date" label="序号" sortable="custom" width="180">
</el-table-column>
方法详细介绍：
| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
-
第二步：在el-table绑定事件sort-change
<el-table :data="tableData" style="width: 100%" @sort-change="sort_change">方法详细介绍：
| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
-
第三步：实现功能（代码）
sort_change ({ column, prop, order }) {
let fieldname = prop;
let sortType = order;
if (fieldname == 'date') {
// 数字排序
this.getNums(fieldname, sortType)
}
if (fieldname == 'name') {
// 汉字首字母排序
this.tableData.sort(this.compare(fieldname, sortType));
}
},
// 数字排序
getNums (fieldname, sortType) {
if (sortType === "ascending") {
this.tableData = this.tableData.sort((a, b) => b[fieldname] - a[fieldname]);
// console.log(this.tableData);
} else if (sortType === "descending") {
this.tableData = this.tableData.sort((a, b) => a[fieldname] - b[fieldname]);
}
},
// 汉字首字母排序
compare (propertyName, sort) {
return function (obj1, obj2) {
var value1 = obj1[propertyName];
var value2 = obj2[propertyName];
if (typeof value1 === "string" && typeof value2 === "string") {
const res = value1.localeCompare(value2, 'zh');
return sort === "ascending" ? res : -res;
} else {
if (value1 <= value2) {
return sort === "ascending" ? -1 : 1;
} else if (value1 > value2) {
return sort === "ascending" ? 1 : -1;
}
}
}
}三.字符串方法localeCompare（）
概念：localeCompare() 方法用于比较两个字符串，并根据本地排序规则确定这两个字符串的顺序。这可以用于排序，例如在表格中按字母顺序排列行。
语法：string.localeCompare(compareString[, locales[, options]])
参数说明：
compareString：必需。要与调用字符串进行比较的字符串。
locales：可选。一个字符串数组，用于指定一种或多种区域设置代码。
options：可选。一个包含属性的对象，用于控制比较的各方面。
注意事项：
1、localeCompare() 方法是大小写敏感的。例如，"a" 和 "A" 是不同的字符。
2、localeCompare() 方法也是重音符号敏感的。例如，"é" 和 "è" 是不同的字符。
3、localeCompare() 方法的默认区域设置是当前系统的区域设置。
4、localeCompare() 方法返回的数字取决于本地排序规则。不同的语言和不同的区域设置可能会有不同的排序规则。
5、localeCompare() 方法不会更改原始字符串。它只是返回一个数字。
常用场景：汉字排序
四.总结
- 这里面相当于用了一个表格自定义排序方法，这个点是我们该考虑的，这里还可以用sort-method。这个方法是需要在每列都加的，我当时做的是动态添加表头的需求，sort-method就不好实现。
- 想用sort-change方法来自定义排序方法一定要sortable="custom"；如果sortable="true",就代表你使用的默认排序。只有order=null时才会触发你自定义的方法。
