526互联

VUE element-ui之table表格全局排序

发布时间 2023-08-21 19:08:46作者: 打个大大西瓜

一 调用后端接口排序功能

步骤：
标签中定义排序方法：

<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} " />