Element-ui el-table 全局表格排序

实现效果如下:

一、当页数据排序

如果只想要当前页面排序,只会涉及到前端,只需在<el-table-column>标签上添加 :sortable="true"即可

二、自定义排序

如果想要全局排序,需要自定义排序函数,请求后台排序后在分页。

1、自定义排序函数,在<el-table>上添加

@sort-change="sortChange"

2、在要排序的列上加上

复制代码
sortable="custom"

3、实现排序函数sortChange

复制代码
     //自定义排序列表
      sortChange(data) {
        const { prop, order } = data
        //排序列
        this.queryParams.orderByColumn = prop;
        //排序顺序ascending或descending
        this.queryParams.isAsc = order;
        //返回第一页
        this.queryParams.pageNum = 1;
        //刷新列表
        this.getList();
      },
相关推荐
星栈几秒前
10 分钟跑起第一个 Dioxus 应用:`dx` CLI、`rsx!` 和热更新好不好用
前端·rust·前端框架
奋斗吧程序媛13 分钟前
补充一个小知识点:有关@click.native
前端·vue.js
英勇无比的消炎药22 分钟前
一行命令背后:TinyRobot CLI 如何重构 AI 对话接入的效率范式
vue.js·aigc
触底反弹22 分钟前
🚀 手把手用 HTML5 Canvas 从零打造飞机大战游戏,代码全开源!
前端·javascript·canvas
DJ斯特拉24 分钟前
axios快速使用
开发语言·前端·javascript
智通26 分钟前
可取消的异步任务与 AbortController
javascript
还有多久拿退休金27 分钟前
Ant Design Tree 搜索定位避坑指南:虚拟滚动下如何实现高亮与精准定位
前端·react.js
小月土星29 分钟前
CSS 3D 从入门到炫技:手把手教你写一个旋转立方体
前端·css
Hilaku1 小时前
AI 写代码越快,为什么 Code Review 越不能省?
前端·javascript·程序员
sugar__salt2 小时前
从网页小游戏到数据可视化:掌握 HTML5 Canvas 核心能力
前端·信息可视化·html5