解决ElementUI中table组件+分页组件+倒序排列问题

在这里插入图片描述
项目中有需求,需要在table+分页的情况下做一个倒序排列的table表格弹窗,
但是这个分页是每点击一次拿5条数据,如果做倒序只能做这5条数据的倒序.
不符合需求,问了一下同事之后发现有一个字段"sidx"可以控制排序,以id为例子,
在这里插入图片描述
sidx: 'id desc’表示逆向排序
sidx: ‘id asc’ 为默认,表示正向排序

在这里插入图片描述
通过查elementUI组件的列表属性及方法可以得到sortable方法,如下图使用

(sortable默认只在当前分页倒序,sortable:'custom’表示调用远程方法@sort-change监听)在这里插入图片描述
当监听到sort-change方法被调用时,再判断sort-change监听到的值,最后做一些逻辑处理,如下图
在这里插入图片描述
现在可以逆向排序了,但是分页又出现了问题,因为翻页时还是调用的默认的排序方法,这时候可以指定一个flag,
在这里插入图片描述
监听this.flag,当为真时即便顺向排序,就往sortChange方法中传入descending,
为假时传入ascending,需要和上图结合看

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值