步骤:
标签中定义排序方法:
<el-tableref="reset"v-loading="loading":data="tableData"height="520"border@sort-change="sortChange">
要排序的字段定义排序关键字sortable :
<el-table-column prop="sumNum" label="交易次数" align="left" sortable="true" />//注意:调用接口排序时必须sortable="true",表格自带排序则只需sortable
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自带排序只针对当前页进行排序,有分页限制; 调用后端接口排序不受分页影响
/1/14新增清除排序状态(即恢复为未排序状态):
this.$refs.reset.clearSort()