1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > VUE element-ui之table表格全局排序 调用后端接口排序功能

VUE element-ui之table表格全局排序 调用后端接口排序功能

时间:2021-06-27 14:26:37

相关推荐

VUE element-ui之table表格全局排序 调用后端接口排序功能

步骤:

标签中定义排序方法:

<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()

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。