VUE(3) : vue-element-admin[3] : 表格排序

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

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

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

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"]的值