Vue之element table 后端排序实现

1、如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

<el-table v-loading="loading" :data="testList" @sort-change='tableSortChange'>
       <el-table-column sortable='custom' prop="createTime" label="创建时间">
       </el-table-column>
</el-table>

2、定义methods监听sort-change事件，sort-change方法自带三个参数，分别代表意义是：
column：当前列
prop：当前列需要排序的数据
order：排序的规则（descending降序、ascending升序）

tableSortChange(val) {
      console.log(val) // column: {…} order: "ascending" prop: "date"
      this.queryParams.pageNo = 1
      if (column.order === 'descending') {
        this.queryParams.sortby = val.prop
        this.queryParams.order = 'desc'
      } else {
        this.queryParams.sortby = val.prop
        this.queryParams.order = 'asc'
      }
    this.getList()
 }

3、通过axios提交请求数据到后端

getList() {
      this.listLoading = true
      testList(this.queryParams).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    }