为什么el-table碰到缺失字段的情况排序会乱
demo预览：
https://sunzsh.github.io/vue-demos/#/eltable-sort
代码：
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/eltable-sort.vue
el-table不是支持这种按某
一列排序吗
但是我今天用的时候发现一个问题啊
大家看我这一列有的是没有数值的
然后呢他排序起来就会乱
大家看啊
为什么呢
我先直接说原因啊
原因是我这个数据里边有的这个行啊
他压根就没有age这个属性
这种情况他就会有问题
所以呢解决方法是什么呢
大家看我们在
（模仿）拿到数据之后啊
我们要手动的给他处理一下
我们把这个age判断一下
如果啊它等于undefined
然后呢我们给它设置一个null
只要它不等于undefined，等于null都没问题
我们再来试一下
大家看，这回就没有问题了
那具体为什么会这样呢
我先把这个代码还原回来哈
我把这块先注掉
然后呢我们打开调试哈
我之前找到这个代码了
至于怎么找这个代码我之前讲过
最重要的是
就是在这点sort这个方法里
我在这打一个断点，然后点一下排序
大家注意啊
这个a和b就是两个要比较的数
key里边就是这个年龄
大家看，30和25比
这个先不管它
我们找一个undefined
大家看undefined和30比
那它俩谁大谁小呢
我们来看结果
order现在是
说明
系统就会认为啊它俩是相等的
所以最终的排序就会乱
那为什么会出现这种情况呢
我们就需要看这个compare这个方法
所以呢我们在这再打个断点
走到这大家看这个key是undefined
然后我们走到compare方法里
好走进来了
注意看啊
然后进来他会看
这个a点key:42 和 undefined比较
相当于呢他在判断42是不是小于undefined
大家看不小于
然后呢他又判断42是不是大于undefined
也不大于
大家看也没进去
所以最终走到零了
所以呢这就是问题的所在
当我们在比较啊一个数值
是不是大于或者小于undefined的时候
它永远是false
大家看这是大于
这是小于
它永远是false
但是呢
我们如果去比较这个null的时候
大家看，42是大于null的
小于null吗
不小于null
所以呢
我们把它设置成null是没有问题的
好所以啊
我们把那些没有age属性的
给它设置一个null
它排序起来就没有问题了
最后更新于