element-UI:el-table 表格排序

el-table 表格排序

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

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

@sort-change="changeTableSort"

sort-change:当表格的排序条件发生变化的时候会触发该事件

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

:sortable="'custom'"

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

第三步:声明 changeTableSort()

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

在这里插入图片描述

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

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

element-UI:el-table 表格排序_第1张图片

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


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

你可能感兴趣的:(技术点,Vue,前端)