ElementUI之table后端排序

今天在处理一个需求时，需要table可以根据某些字段进行排序，使用ElementUI的table组件，发现本身就有这个功能，但是需要自己手动改动下，组件默认是对当前展示数据进行排序。

在这里插入图片描述

从官网给出的说明，总共需要两步

首先给要排序的字段加上sortable值为custom【custom则代表用户希望远程排序，也就是用户自己设置排序规则，需要监听
Table 的 sort-change 事件】
给table加上sort-change事件，用户点击排序触发该事件，该事件能够获取用户点击的字段和排序方式等信息

具体操作的如下所示

<template>
  <div class="contentStat">
     <el-table
        :data="rankTableData"
        style="width: 100%"
        stripe
        @sort-change="handleSort"
        :default-sort= "{
    
     // 设置默认排序字段及排序方式
          prop: 'read_times',
          order: 'descending'
        }"
      >
      
        <el-table-column
          prop="read_times"
          sortable="custom" // sortable属性值为custom，代表用户远程排序
          label="阅读量">
        </el-table-column>
        
      </el-table>
  </div>
</template>

<script>
import {
    
     getRankList } from '@/api/data'

export default {
    
    
  name: 'ContentStat',
  data() {
    
    
    return {
    
    
      sort: '-read_times', // 接口支持多字段排序，格式为排序字段逗号拼接，默认正序，-代表倒序
      rankTableData: []
    }
  },
  created() {
    
    
    this.initData()
  },
  methods: {
    
    
    initData() {
    
     // 初始化数据
      this.getRankList()
    },
    getRankList() {
    
     // 作品列表
      const _this = this
      const params = {
    
    
        sort: this.sort
      }
      
      getRankList(params).then(res => {
    
    
        if (res.code === 0) {
    
    
          _this.rankTableData = res.data.data
        }
      })
    },
    handleSort(obj) {
    
     // 用户点击排序字段触发事件
      this.sort = obj.prop
      if (obj.order === 'descending') {
    
     // 转换格式，准成接口要求格式
        this.sort = '-' + obj.prop
      }
      
	  // 调用接口，刷新数据
      this.getRankList()
    }
  }
}
</script>

ElementUI之table后端排序

猜你喜欢