1. table标签新增排序相关属性
// :default-sort="defaultSort" 指定默认排序
// @sort-change="handleSortChange" 指定排序点击事件
:default-sort="defaultSort" @sort-change="handleSortChange"
2. 列上新增排序相关配置
自定义查询语句,全局数据排序
// sortable="custom" 表示这一列支持自定义排序。要执行特定的排序逻辑,服务器端的排序或特殊的比较函数,需使用 "custom" 并结合其他方法来处理排序。
// :sort-orders="['descending', 'ascending']" 是一个动态绑定,用于设置排序的顺序。首先尝试按降序排序,然后是按升序排序。这个数组,可根据需求修改或添加其他值。
sortable="custom" :sort-orders="['descending', 'ascending']"
3. js中新增默认排序
// 默认排序 payAmount支付金额;descending 降序排序
defaultSort: {prop: 'payAmount', order: 'descending'},
4. 重置事件内,也要新增重置排序的操作
this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order) //重置排序
5. 新增排序触发事件
6. 后端:直接使用startPage()即可
确保分页查询接口所在类继承了BaseController,并调用了父类的startPage()分页查询方法:
下面是分页查询中集成了排序功能:
========================================
其他排序
只使用 sortable
当前页排序:(不建议使用,仅支持当前页面上的数据排序)
仅限当前第3页页面显示的10条数据顺序倒序排序