项目经验】：elementui表格中数字汉字排序问题

2023-09-17 1053

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

对象存储 OSS，OSS 加速器 50 GB 1个月

简介： elementui表格中数字汉字排序问题

一.需求

表格中数字汉字排序，数字按大小排列，汉字按拼音首字母（A-Z）排序。

二.用到的方法

第一步：把el-table-column上加上sortable="custom"

<el-table-columnprop="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 }) {
letfieldname=prop;
letsortType=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);            } elseif (sortType==="descending") {
this.tableData=this.tableData.sort((a, b) =>a[fieldname] -b[fieldname]);
            }
        },
// 汉字首字母排序compare (propertyName, sort) {
returnfunction (obj1, obj2) {
varvalue1=obj1[propertyName];
varvalue2=obj2[propertyName];
if (typeofvalue1==="string"&&typeofvalue2==="string") {
constres=value1.localeCompare(value2, 'zh');
returnsort==="ascending"?res : -res;
                } else {
if (value1<=value2) {
returnsort==="ascending"?-1 : 1;
                    } elseif (value1>value2) {
returnsort==="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时才会触发你自定义的方法。

五.源码（可直接复制跑起来）

<template><divclass="about"><el-table :data="tableData"style="width: 100%"@sort-change="sort_change"><el-table-columnprop="date"label="序号"sortable="custom"width="180"></el-table-column><el-table-columnprop="name"label="姓名"sortable="custom"width="180"></el-table-column></el-table></div></template><script>exportdefault {
name: 'WorkspaceJsonAboutView',
data () {
return {
tableData: [{
date: '1',
name: '田禹',
            }, {
date: '2',
name: '康康',
            }, {
date: '3',
name: '振洋',
            }, {
date: '4',
name: '根宝',
            }, {
date: '5',
name: '彤彤',
            }, {
date: '6',
name: '建鹏',
            }, {
date: '7',
name: '文文',
            }, {
date: '8',
name: '铖',
            }
            ],
        };
    },
mounted () {
    },
methods: {
sort_change ({ column, prop, order }) {
letfieldname=prop;
letsortType=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);            } elseif (sortType==="descending") {
this.tableData=this.tableData.sort((a, b) =>a[fieldname] -b[fieldname]);
            }
        },
// 汉字首字母排序compare (propertyName, sort) {
returnfunction (obj1, obj2) {
varvalue1=obj1[propertyName];
varvalue2=obj2[propertyName];
if (typeofvalue1==="string"&&typeofvalue2==="string") {
constres=value1.localeCompare(value2, 'zh');
returnsort==="ascending"?res : -res;
                } else {
if (value1<=value2) {
returnsort==="ascending"?-1 : 1;
                    } elseif (value1>value2) {
returnsort==="ascending"?1 : -1;
                    }
                }
            }
        }
    },
};
</script><stylelang="less"scoped>.about {
width: 100%;
height: 100%;
background: yellowgreen;
display: flex;
justify-content: center;
align-items: center;
    .tableDiv {
width: 800px;
height: 100%;
    }
}
.el-table ::webkit-scrollbar {
display: block;
height: 938px;
width: 6px;
}
.el-table ::webkit-scrollbar-thumb {
box-shadow: inset000pxwhite;
-webkit-box-shadow: inset000pxwhite;
background: rgba(64, 158, 255, 0.6);
border-radius: 4px;
}
.el-table ::-webkit-scrollbar-track {
background: #424f6a;}
</style>