Vue 与 element table 结合后端请求实现排序

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

<el-table @sort-change='sortTableFun'>
       <el-table-column type="index" label="序号" width="50"></el-table-column>
       <el-table-column prop="pid" label="物料编码" min-width="80px" show-overflow-tooltip sortable></el-table-column>
</el-table>

2、在methods监听sort-change事件

           data() {
           return {
                    column: '',
                    order: '',
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                    loading: false, // 按钮加载 状态
 
                   }
           }
 
 
         //表格排序
            sortTableFun(column) {
                this.column = column.prop;
                if (column.prop) {
                    if (column.order == 'ascending') {
                        this..order = 'ASC';
                    } else if (column.order == 'descending') {
                        this.order = 'DESC';
                    }
                    this.productList()
                }
            },

3、发请求数据到后端 返回数据

productList() {
    this.listLoading = true
    let  params={
    order: this.order,
    column: this.column,
    curPage: this.currentPage,
    pageSize: this.pageSize,
    }
      tabelList(params).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    }

这样就可以实现element sort 向后端请求排序啦！！！