Leaderboard:{
type:2,
page:1,
limit:10,
sort:'play_count',//传给后端的数据
sort_order:'desc',//升序or降序 默认降序
start_date:'',
end_date:''
},
prop:'play_count',//表格里面要写的
type:'desc',//表格里面要写的
注意的点:
1.el-table标签上要写 @sort-change=“onSortChange” :default-sort = “{‘prop’: prop, ‘order’: type}” ,点击升序或者降序调用的函数sort-change,prop是哪个属性执行排序,order:执行的是升序还是降序,
2.在需要排序的el-table-column上添加属性sortable=‘custom’ ,custom表示后端排序,如果只写sortable,就表示仅在前端排序,详情可在官网查看,比较简单
<el-table height="600" max-height="600" :data="videoListData" style="width: 100%;" :header-cell-style="{color:'#fff',fontSize:'14px',fontWeight:'500'}" @sort-change="onSortChange" :default-sort = "{'prop': prop, 'order': type}" >
<el-table-column prop="play_count" label="播放量" sortable='custom' align="center" width="86"></el-table-column>
<el-table-column prop="digg_count" label="点赞量" sortable='custom' align="center" width="86"></el-table-column>
<el-table-column prop="comment_count" label="评论量" sortable='custom' align="center" width="86"></el-table-column>
</el-table>
onSortChange({ prop, order }){
console.log(prop,order);//play_count,ascending
this.Leaderboard.sort=prop;
this.Leaderboard.sort_order=order=='ascending'?'asc':'desc'
this.getVideoData()//获取表格数据的函数,里面是请求表格数据的接口
},