Element UI 里的el-table表格排序_element ui table 排序

后台管理有时候会有排序的需求，如果只针对当前页进行排序，那么前端就可以实现排序，在对应需要排序的字段中，使用sortable字段即可，但是如果存在分页的情况，就只能排序展示页的内容，无法所有数据排序，这时候我们就要使用后端排序了。

一、给el-table设置事件 @sort-change="changeTableSort"

<el-table v-if='activate==4' 
   :data="tableData.body"
    border
    @sort-change="changeTableSort"
        >
</el-table>

二、给需要排序的表格设置属性 sortable="custom"

 <el-table-column align="center" 
    label="总佣金金额" 
    prop="commissionPrice"
    width='150' 
    sortable="custom"
          >
 </el-table-column>

三、声明 changeTableSort（）

   //排序
    changeTableSort(column){
      console.log(column)
      if(column.order=='descending'){
        this.sorting='desc'
      }else if(column.order=="ascending"){
        this.sorting='asc'
      }
      this.prop=column.prop
      this.getTableData4()
    },
 
 
     // 邀请明细接口
    getTableData4() {
      let params = {
        size: this.queryParams.size, //每页显示条数
        current: this.queryParams.current, //当前页
        userNo:this.$route.query.userNo,
        orderBy:this.prop,
        sortingRules:this.sorting
      }
      this.$api.customerAccountMgmt.inviteDetail(params).then(res => {
        if (res.code == 200) {
          this.tableData.loading = false
          let resData = res.data
          this.tableData.body = resData.records
          this.total = resData.total;
          this.indexStartNum = ((this.queryParams.current) * this.size) - 1
          if (this.total > 0) {
            this.pagination = true
          } else {
            this.pagination = false
          }
          this.startRow = resData.startRow;
          this.endRow = resData.endRow;
 
        } else {
          this.common.messageTipCode(res, 'error');
        }
 
      })
    },

打印出的数据为

order：排序的方式 ascending == 升序 descending == 降序 null == 不排序

prop：排序的那个表格的字段名

我把我的接口传参贴出来，上面的代码可以结合此图进行理解。

可以根据打印出来的值，和后端让我们传给他的参数，进行处理，就能实现排序功能。