element-UI:el-table 表格排序
程序员文章站
2022-03-12 21:52:14
el-elment 表格排序elementUI虽然表格列本身就有 sortable 属性可以对表格的数据进行排列,但是为了提高网页性能,我们从后端一般拿到的只是当前页的数据,并不是直接拿到所有的数据都放在表格里,那这样的话我们如何对表格进行排序呢?以下是我对表格进行排序的详细步骤第一步:给el-table设置事件@sort-change="changeTableSort"sort-change:当表格的排序条件发生变化的时候会触发该事件第二步:给需要排序的表格列设置属性:sortable="'...
el-elment 表格排序
elementUI虽然表格列本身就有 sortable 属性可以对表格的数据进行排列,但是为了提高网页性能,我们从后端一般拿到的只是当前页的数据,并不是直接拿到所有的数据都放在表格里,那这样的话我们如何对表格进行排序呢?以下是我对表格进行排序的详细步骤
第一步:给el-table设置事件
@sort-change="changeTableSort"
sort-change:当表格的排序条件发生变化的时候会触发该事件
第二步:给需要排序的表格列设置属性
:sortable="'custom'"
sortable:对应列是否可以排序,如果设置为 ‘custom’,则代表用户希望远程排序,需要监听 Table 的 sort-change 事件
第三步:声明 changeTableSort()
声明一个方法 他是自带一个参数的 参数有两个属性
prop:排序的那个表格的字段名
order:排序的方式 ascending == 升序 descending == 降序 null == 不排序
通过判断这两个属性来给后端发请求,然后拿到新的数据放到表格里,这样就完成了排序
这个方法真正的排序其实是由后端来做的,我们只需要给他们传递对应的属性就行了,因为前端只有当前页的数据,即使进行了排序也是有问题的
本文地址:https://blog.csdn.net/Big_YiFeng/article/details/111842788