排序调试页面路径为  : /#/table/complex-table

1.table标签添加排序事件[@sort-change="sortChange"]

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >

2.表头标签添加[prop="id" sortable="custom" :class-name="getSortClass('id')"]

      <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('table.author')" width="110px" align="center" prop="author" sortable="custom" :class-name="getSortClass('author')">
        <template slot-scope="{row}">
          <span>{{ row.author }}</span>
        </template>
      </el-table-column>

3.添加全局变量

var currentSort = null
var currentSortField = null

4.修改[sortChange,sortByID,getSortClass]函数

    sortByID(prop, order) {
      console.log(prop, order)
      if (order === 'ascending') {
        this.listQuery.sort = `+${prop}`
        currentSort = '+'
      } else if (order === 'descending') {
        this.listQuery.sort = `-${prop}`
        currentSort = '-'
      } else {
        this.listQuery.sort = null
        currentSort = null
      }
      currentSortField = prop
      this.handleFilter()
    },
    getSortClass: function(key) {
      if (currentSortField === key) {
        if (currentSort === '+') {
          return 'ascending'
        } else if (currentSort === '-') {
          return 'descending'
        } else {
          return null
        }
      } else {
        return null
      }
    }

5.发送的请求

http://localhost:9527/api/article/list?page=1&limit=20&sort=-id
http://localhost:9527/api/article/list?page=1&limit=20&sort=+id
http://localhost:9527/api/article/list?page=1&limit=20&sort=+author
http://localhost:9527/api/article/list?page=1&limit=20&sort=-author

注 : 点击发送请求会携带排序字段及排序方式,+为升序,-为降序,字段名为[prop="id"]的值