今天在处理一个需求时,需要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>