Vue Antd table组件实现服务端排序方式
更新时间：2025年03月31日 10:41:54 作者：你看人家超
这篇文章主要介绍了Vue Antd table组件实现服务端排序方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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.current
this.sort = {
orderField: field || '',
order: order || ''
}
this.getData()
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue如何直接获取url中的参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
ElementUI之表格toggleRowSelection选中踩坑记录
这篇文章主要介绍了ElementUI之表格toggleRowSelection选中踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue出现Uncaught SyntaxError:Unexpected token问题及解决
这篇文章主要介绍了vue出现Uncaught SyntaxError:Unexpected token问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
在 Vue3 中，有许多与响应式相关的函数，例如 toRef、toRefs、isRef、unref 等等,本文将详细介绍这些函数的用法，让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题2023-08-08
关于vue-router路由的传参方式params query
这篇文章主要介绍了关于vue-router路由的传参方式params query,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue create、vue webpack init创建vue项目产生的项目文件的区别
这篇文章主要介绍了vue create、vue webpack init创建vue项目产生的项目文件的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了在Vue中实现回车键切换焦点的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
vue emit之Property or method “$$v“ i
这篇文章主要介绍了vue emit之Property or method “$$v“ is not defined的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了Vue.js简易安装和快速入门的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
防抖节流是可以说是一种优化组件性能的技巧,可以有效减少组件中的渲染次数和计算量,本文主要介绍了Vue3项目中使用防抖节流的实现示例,感兴趣的可以了解一下2024-04-04
最新评论