el-table实现后端支持的排序

最新推荐文章于 2025-05-21 07:52:14 发布

我超幸运12138

最新推荐文章于 2025-05-21 07:52:14 发布

阅读量750

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 elementui

本文链接：https://blog.youkuaiyun.com/m0_45858045/article/details/137069202

本文介绍了如何在HTML中使用ElementUI的el-table组件实现视频排行榜的动态排序，包括前端自定义排序和与后端的交互，通过onSortChange事件处理prop和order参数，实现播放量、点赞量和评论量的定制排序功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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()//获取表格数据的函数，里面是请求表格数据的接口
    },