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

步骤：

标签中定义排序方法：

<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="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自带排序只针对当前页进行排序，有分页限制；

        调用后端接口排序不受分页影响**

2022/1/14新增清除排序状态（即恢复为未排序状态）：

this.$refs.reset.clearSort()