一 调用后端接口排序功能
步骤:
标签中定义排序方法:
<el-table
ref="reset"
v-loading="loading"
:data="tableData"
height="520"
border
@sort-change="sortChange"
>
要排序的字段定义排序关键字sortable :
<el-table-column prop="sumNum" label="交易次数" align="left" sortable="custom"/>
//注意:调用接口排序时必须sortable="true",表格自带排序则只需sortable sortable="true"
methods中实现全局排序方法:
sortChange(column) {
this.tableData = []
if (column) {
if (column.prop === 'sumNum' && column.order === 'ascending') {//这里双重判断:该字段为升序时向后端传递升序参数,反之降序
this.params.sort = 'sumNum,asc'
} else if (column.prop === 'sumNum' && column.order === 'descending') {
this.params.sort = 'sumNum,desc'
}
frequencyTen({ ...this.params }).then(res => {//注意排序后需再次调用表格数据接口更新表格
this.tableData = res.frequency.content
})
}
}
注:element-ui自带排序只针对当前页进行排序,有分页限制;
调用后端接口排序不受分页影响
2022/1/14新增清除排序状态(即恢复为未排序状态):
this.$refs.reset.clearSort()
二 前端处理
<el-table-column show-overflow-tooltip label="wrewrewr" prop="xxxxxxxxx" width="120" sortable :sort-method="(a,b)=>{return a.tttt - b.tttt} " />
标签:VUE,sortable,表格,column,element,ui,sumNum,params,排序
From: https://www.cnblogs.com/liliuyu/p/17646812.html