ElementUI之table后端排序

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

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

1、首先给要排序的字段加上sortable值为custom【custom则代表用户希望远程排序，也就是用户自己设置排序规则，需要监听Table 的 sort-change 事件】

2、给table加上sort-change事件，用户点击排序触发该事件，该事件能够获取用户点击的字段和排序方式等信息

具体操作的如下所示

<template><div class="contentStat"><el-table:data="rankTableData"style="width: 百%"stripe@sort-change="handleSort":default-sort= "{ // 设置默认排序字段及排序方式prop: 'read_times',order: 'descending'}"><el-table-columnprop="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 = thisconst params = {sort: this.sort}getRankList(params).then(res => {if (res.code === 0) {_this.rankTableData = res.data.data}})},handleSort(obj) { // 用户点击排序字段触发事件this.sort = obj.propif (obj.order === 'descending') { // 转换格式，准成接口要求格式this.sort = '-' + obj.prop}// 调用接口，刷新数据this.getRankList()}} 
} 
</script>