热搜: fiddler git ip 代理
历史搜索

el

游客2024-09-25 07:53:01
目录文章目录
  1. localeCompare()介绍
  2. 实现步骤
  3. 总结

产品要求对 el-table 表格中数字与汉字进行排序,数字按大小排列,汉字按拼音首字母(A-Z)排序。

数字排序实现简单了,这里不多说,汉字排序就需要引入今天的主角localeCompare()方法。

localeCompare()介绍

localeCompare() 方法用于比较两个字符串,并根据本地排序规则确定这两个字符串的顺序。这可以用于排序,例如在表格中按字母顺序排列行。

语法:

string.localeCompare(compareString[, locales[, options]])

参数说明:

  • compareString:必需。要与调用字符串进行比较的字符串;
  • locales:可选。一个字符串数组,用于指定一种或多种区域设置代码;
  • options:可选。一个包含属性的对象,用于控制比较的各方面。

注意事项:

  1. localeCompare() 方法是大小写敏感的。例如,”a” 和 “A” 是不同的字符。
  2. localeCompare() 方法也是重音符号敏感的。例如,”é” 和 “è” 是不同的字符。
  3. localeCompare() 方法的默认区域设置是当前系统的区域设置。
  4. localeCompare() 方法返回的数字取决于本地排序规则。不同的语言和不同的区域设置可能会有不同的排序规则。
  5. localeCompare() 方法不会更改原始字符串。它只是返回一个数字。

常用场景:汉字排序。

实现步骤

1、在 el-table-column 上加上 sortable=”custom”。

<el-table-column prop="date" label="序号" sortable="custom">
</el-table-column>

方法详细介绍:

el 1

3、代码实现

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;
            }
        }
    }
}

总结

这里面相当于用了一个表格自定义排序方法,这个点是我们该考虑的,这里还可以用sort-method。这个方法是需要在每列都加的,我当时做的是动态添加表头的需求,sort-method 就不好实现。

想用 sort-change 方法来自定义排序方法一定要设置sortable="custom";如果sortable="true",就代表你使用的默认排序。只有order=null时才会触发你自定义的方法。

标签:el-table