今天表格自定义排序上出了点问题,检查发现是自身的疏忽,然后再解决问题的时候收获到了一些小知识。所以记录一下。

首先是 sort-change

sort-change 是 element表格用来监听排序变化的,只有当表格排序发生变化,才会触发这个事件,它并不只是监听某一列的排序,而是整个表格,所以它是要写在el-table上的,而不是el-table-column上。别写错地方了。
在这里插入图片描述

sort-change 主要有三个参数{ column, prop, order }
在这里插入图片描述
column是发生排序变化的列。
order是排序方式,有三个选项 ascending 升序、descending 降序、 null 默认排序
prop就是该列的prop。

关于sort-method

提sort-method之前先说一下sortable,只有在 el-table-columnsortable 为 true 的情况下。sort-method才有效。
el-table表格的每一列都可以有自己的排序方式,所以 sort-method是写在 el-table-column上的,不是在el-table上的,不要写错地方了,而且,不同于sort-change,它只是一个属性,不是事件监听,绑定的时候不要写成@sort-method="sortMethod",而是应该用:sort-method="sortMethod"(我就是这里写错了,导致事件一直没反应=。=)

sort-method 对数据进行排序的时候使用的方法,仅当 sortable 设置为 true 的时候有效,需返回一个数字,和 Array.sort 表现一致。

比如下面就是我的排序方法,有a 、 b两个参数,跟 js的sort方法一样,不熟悉的可以去百度0.0

若 a 小于 b,即 a - b 小于零,则返回一个小于零的值,数组将按照升序排列。
若 a 等于 b,则返回 0。
若 a 大于 b, 即 a - b 大于零,则返回一个大于零的值,数组将按照降序排列。

以上是数字排序,像字符串排序啊属性排序啊之类的。。可以自行扩展=。=

	// 排序方法
    sortMethod(a, b) {
      return a - b
    },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐