陶醉的松鼠

外观

本页目录

element自带的排序是当前页排序，实现全部数据排序的话，需要走接口进行后端排序 ​

  1. 表格中需要排序的那栏，将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据
vue
<el-table @sort-change='sortChange'>
       <el-table-column sortable='custom' prop="createTime" label="创建时间">
       </el-table-column>
</el-table>

2.定义methods监听sort-change事件

javascript
sortChange(column, prop, order){
      console.log(column + "-" + column.prop + "-" + column.order);
      // 升序ascending 降序descending null默认不排序
      if (column.order == "ascending") {
        this.listQuery.orderType = true;
      } else if (column.order == "descending") {
        this.listQuery.orderType = false;
      }
      //请求后端接口，获取排序后的新数据
      getWaterList(this.listQuery).then(res => {
        if (res.rtnCode == 200) {
          this.total = res.data.totalCount;
          this.list = res.data.data;
          this.listLoading = false;
        }
      });
    },