如何在ElementUI中的Table控件中使用拼音进行排序
本人使用版本是1.4.7
在这个版本中对应全是String的column进行排序并不是按照拼音的方式排列的。
这里我贴一下源代码就可以看出是为什么了:
export const orderBy = function(array, sortKey, reverse, sortMethod) {
if (typeof reverse === 'string') {
reverse = reverse === 'descending' ? -1 : 1;
}
if (!sortKey && !sortMethod) {
return array;
}
const order = (reverse && reverse < 0) ? -1 : 1;
// sort on a copy to avoid mutating original array
return array.slice().sort(sortMethod ? function(a, b) {
return sortMethod(a, b) ? order : -order;
} : function(a, b) {
if (sortKey !== '$key') {
if (isObject(a) && '$value' in a) a = a.$value;
if (isObject(b) && '$value' in b) b = b.$value;
}
a = isObject(a) ? getValueByPath(a, sortKey) : a;
b = isObject(b) ? getValueByPath(b, sortKey) : b;
return a === b ? 0 : a > b ? order : -order;
});
};
关键就在:
return a === b ? 0 : a > b ? order : -order; return sortMethod(a, b) ? order : -order;
本人之前直接用
a.brandName.localeCompare(b.brandName)
导致排序出问题,因为源代码中只接受true与false,而且localeCompare会返回1、0、-1,-1会被转化为true,从而造成了bug。正确方式:
return a.brandName.localeCompare(b.brandName)>0 ? 1:0;
将-1转化为0,这样就正确了
ps.需要判断a与b是否为空,如果为null就赋值为‘’
2017/12/14升级了2.08发现源代码的判断方式改掉了,所以需要改成:
return a.brandName.localeCompare(b.brandName)>0;
如何在ElementUI中的Table控件中使用拼音进行排序的更多相关文章
- C#中向ListView控件中添加一行数据
C#中向ListView控件中添加一行数据: ,先声明一个ListViewItem: ListViewItem item = new ListViewItem(); ,添加第一列数据: item.Te ...
- android中去掉ListView控件中的分割线
通过设置android:divider="@null" ,可以去掉ListView控件中的分割线 也可以自定义分割线的颜色,比如: <ListView android:id= ...
- 关于WPF中ItemsControl系列控件中Item不能继承父级的DataContext的解决办法
WPF中所有的集合类控件,子项都不能继承父级的DataContext,需要手动将绑定的数据源指向到父级控件才可以. <DataGridTemplateColumn Header="操作 ...
- C#中设置TextBox控件中仅可以输入数字且设置上限
首先设置只可以输入数字: 首先设置TextBox控件的KeyPress事件:当用户按下的键盘的键不在数字位的话,就禁止输入 private void textBox1_KeyPress(object ...
- ASP.Net中的TreeView控件中对节点的上移和下移操作
Web中的TreeView中的没有PreNode和NextNode属性. 但它的集合属性中有一个IndexOf属性,从而能够找到它的前一个节点知后一个节点. TreeView中要么只有一个根节点:要么 ...
- Table 控件各元素及属性
功能:在Web页中创建通用表格里. 属性: 1.CellPadding属性:用于设置表中单元格的边框和内容之间的距离(以像素为单位).默认为-(未设置). 2.CellSpacing属性:用于设置表中 ...
- 灵活轻便的Table控件,适合复杂样式的内容排版
github仓库地址 https://github.com/gaoyangclub/GYTableViewController 前言 TableView是在项目开发的时候经常用到的组件,几乎百分之八十 ...
- 关于使用MVVM模式在WPF的DataGrid控件中实现ComboBox编辑列
最近在做一个组态软件的项目,有一个需求需要在建立IO设备变量的时候选择变量的类型等. 建立IO变量的界面是一个DataGrid实现的,可以一行一行的新建变量,如下如所示: 这里需要使用带有ComboB ...
- 利用书签功能对TDBGrid控件中多个记录的处理
DELPHI 的TDBGrid 控 件 主 要 用 来 处 理 数 据 表, 它 的 属 性 中 有 一 个dgMultiSelect, 若 此 属 性 设 定 为TRUE, 则 可 以 选 中 多 ...
随机推荐
- docker日志清理
前言:docker运行久了,会发现它的映射磁盘空间爆满,尤其是yum安装的docker的 解决方法: 1. 用脚本清理,一般yum安装的docker,其存储空间一般都在/var/lib/docker/ ...
- pycharm常用设置和快捷键大全
pycharm常用快捷键 1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + ...
- 一脸懵逼学习Hadoop中的MapReduce程序中自定义分组的实现
1:首先搞好实体类对象: write 是把每个对象序列化到输出流,readFields是把输入流字节反序列化,实现WritableComparable,Java值对象的比较:一般需要重写toStrin ...
- [转] 理解Object.defineProperty的作用
对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...
- [BZOJ1977][BeiJing2010组队]次小生成树
题解: 首先要证明一个东西 没有重边的图上 次小生成树由任何一颗最小生成树替换一条边 但是我不会证啊啊啊啊啊啊啊 然后就很简单了 枚举每一条边看看能不能变 但有一个特殊情况就是,他和环上的最大值相等, ...
- Asp.Net Mvc 返回类型总结
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- javascript 和 下拉列表
<form id="f"> <select size="1" name="s"> <option value= ...
- nethogs命令执行报异常的解决方法
- 如何查找物理cpu,cpu核心和逻辑cpu的数量
环境 Red Hat Enterprise Linux 4 Red Hat Enterprise Linux 5 Red Hat Enterprise Linux 6 Red Hat Enterpri ...
- ELK使用3-Logstash
一.命令行输入输出操作 1.命令行输出: /application/elk/logstash/bin/logstash -e 'input { stdin{} } output { stdout{} ...