element-ui table实现调用后端API排序功能

需求：数据表格<el-table> <el-table-column>增加排序功能可升序降序。

步骤：

1、在列中设置sortable属性即可实现以该列为基准的排序。（需要后端排序，需将sortable设置为custom）

2、设置prop排序字段名称。

      <el-table-column
        label="创建日期"
        align="center"
        min-width="120"
        sortable="custom"
        prop="xxx"
      >
        <template slot-scope="{row}">
          <span>{{ row.xxx | formatDate("YYYY-MM-DD", '-') }}</span>
        </template>
      </el-table-column>

3、在 Table 上监听sort-change事件。

    <el-table
      ref="tableData"
      v-loading="listLoading"
      :data="Data.list"
      border
      style="width: 100%"
      @sort-change="sortChange"
    >

4、data 添加

data() {
    return {
queryContent: {        
        sortPropertyName: '',//排序的字段名
        sortType: '',//升降序类型
        }
    }
}

5、sort-change事件方法排序 {column,prop,order} 列数据|排序字段|排序方式

 methods: {   
 // 排序 {column,prop,order} 列数据|排序字段|排序方式
    sortChange(column) {
      this.queryContent.sortPropertyName = column.prop
      this.queryContent.sortType = column.order
      this.getList()
    }
  }