后台管理有时候会有排序的需求,如果只针对当前页进行排序,那么前端就可以实现排序,在对应需要排序的字段中,使用sortable字段即可,但是如果存在分页的情况,就只能排序展示页的内容,无法所有数据排序,这时候我们就要使用后端排序了。
一、给el-table设置事件 @sort-change="changeTableSort"
<el-table v-if='activate==4'
:data="tableData.body"
border
@sort-change="changeTableSort"
>
</el-table>
二、给需要排序的表格设置属性 sortable="custom"
<el-table-column align="center"
label="总佣金金额"
prop="commissionPrice"
width='150'
sortable="custom"
>
</el-table-column>
三、声明 changeTableSort()
//排序
changeTableSort(column){
console.log(column)
if(column.order=='descending'){
this.sorting='desc'
}else if(column.order=="ascending"){
this.sorting='asc'
}
this.prop=column.prop
this.getTableData4()
},
// 邀请明细接口
getTableData4() {
let params = {
size: this.queryParams.size, //每页显示条数
current: this.queryParams.current, //当前页
userNo:this.$route.query.userNo,
orderBy:this.prop,
sortingRules:this.sorting
}
this.$api.customerAccountMgmt.inviteDetail(params).then(res => {
if (res.code == 200) {
this.tableData.loading = false
let resData = res.data
this.tableData.body = resData.records
this.total = resData.total;
this.indexStartNum = ((this.queryParams.current) * this.size) - 1
if (this.total > 0) {
this.pagination = true
} else {
this.pagination = false
}
this.startRow = resData.startRow;
this.endRow = resData.endRow;
} else {
this.common.messageTipCode(res, 'error');
}
})
},
打印出的数据为
order:排序的方式 ascending == 升序 descending == 降序 null == 不排序
prop:排序的那个表格的字段名
我把我的接口传参贴出来,上面的代码可以结合此图进行理解。
可以根据打印出来的值,和后端让我们传给他的参数,进行处理,就能实现排序功能。