700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Vue Antd table组件实现服务端排序

Vue Antd table组件实现服务端排序

时间:2021-06-12 03:04:29

相关推荐

Vue Antd table组件实现服务端排序

由于业务的需求,分页由后端完成,所以排序也必须使用后端排序,但是使用Table默认的sort自定义函数只能够进行当前页面的排序,(举个例子:如果有100条数据,每页有10条数据,点击排序只会进行当前页面的排序,剩下的9个分页还是杂乱无章的)

const colums = [{title: '点赞数',dataIndex: 'diggCount',sorter: (a, b) => a.diggCount - b.diggCount,sortDirections: ['descend', 'ascend'],},]

想要进行服务端的排序需要进行以下步骤,

1. 根据antd 官方文档,设置sorter:true

{title: '点赞数',dataIndex: 'diggCount',sorter: true,sortDirections: ['descend', 'ascend'],},

2. 根据文档的change事件得出,change的第一个参数为分页发生改变时的回调,第二个参数为过滤发生的回调,第三个为排序发生变化时的回调(这里我们主要用到第三个参数)

给table组件加上change事件

<a-table:columns="columns":data-source="videoList":scroll="{ y: 100000 }":pagination="pagination"@change="changeTab">changeTab (p, f, s) {console.log(p, f, s)},

通过打印可以看出console.log(p,f,s)中s的打印结果如下

field为需要排序的字段,order为排序的升降序。

(Antd点击排序的默认顺序为:降序,升序,不排序,以此循环,所以三次的order属性打印值为"descend","ascend"和"")三种情况,所以要进行空值判断,

最终的change函数如下,就可以实现整个数据的排序功能了。

changeTab (p, f, { field, order }) {this.pagination.current = p.currentthis.sort = {orderField: field || '',order: order || ''}this.getData()},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。