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

Lxinccode

已于 2022-08-04 13:58:26 修改

阅读量941

点赞数

分类专栏：前端文章标签： vue 排序

于 2022-08-04 11:38:00 首次发布

本文链接：https://blog.csdn.net/Lxinccode/article/details/126156486

版权

前端专栏收录该内容

62 篇文章 3 订阅

订阅专栏

排序调试页面路径为 : /#/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"]的值