element-UI:el-table 表格排序

el-table 表格排序
elementUI虽然表格列本身就有 sortable 属性可以对表格的数据进行排列,但是为了提高网页性能,我们从后端一般拿到的只是当前页的数据,并不是直接拿到所有的数据都放在表格里,那这样的话我们如何对表格进行排序呢?以下是我对表格进行排序的详细步骤

第一步:给el-table设置事件

@sort-change="changeTableSort"

sort-change 事件:表格的排序条件发生变化的时触发,参数 { column, prop, order }, 分别代表的意义是:

column:当前列

prop:当前列需要排序的数据

order:排序的规则(升序、降序和默认[默认就是没排序])

第二步:给需要排序的表格列设置属性

:sortable="'custom'"

sortable:对应列是否可以排序,如果设置为 ‘custom’,则代表用户希望远程排序,需要监听 Table 的 sort-change 事件

第三步:声明 changeTableSort()

声明一个方法 他是自带一个参数的 参数有两个属性

prop:排序的那个表格的字段名

order:排序的方式 ascending == 升序 descending == 降序 null == 不排序

在这里插入图片描述

 通过判断这两个属性来给后端发请求,然后拿到新的数据放到表格里,这样就完成了排序


这个方法真正的排序其实是由后端来做的,我们只需要给他们传递对应的属性就行了,因为前端只有当前页的数据,即使进行了排序也是有问题的

转载自:https://blog.csdn.net/Big_YiFeng/article/details/111842788

你可能感兴趣的:(vue.js,前端,javascript)