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();
      },
相关推荐
竹林8181 分钟前
在Next.js NFT市场中,我如何解决动态路由、链上数据获取与状态同步的连环坑
前端·javascript·next.js
Ruihong1 分钟前
🚀 Vue 一键转 React!企业后台 VuReact 混写迁移实战
vue.js·react.js
用户693717500138417 分钟前
实测!Gemma 4 成功跑在安卓手机上:离线 AI 助手终于来了
android·前端·人工智能
大阿明18 分钟前
使用vite打包并部署vue项目到nginx
前端·vue.js·nginx
小江的记录本22 分钟前
【Swagger】Swagger系统性知识体系全方位结构化总结
java·前端·后端·python·mysql·spring·docker
用户4450666087623 分钟前
领域模型 DSL 设计
前端
csdn_aspnet24 分钟前
如何在 .NET Core WebAPI 和 Javascript 应用程序中安全地发送/接收密钥参数
javascript·.netcore·cryptojs
画画的阿飞25 分钟前
里程碑一:基于 node.js 实现 BFF 层服务端内核过程总结
前端
用户81135818812028 分钟前
【AJAX-Day2】Promise与回调地狱
前端·ajax
Moshow郑锴29 分钟前
npm国内镜像加速之使用 nrm 工具(灵活切换,适合多环境)
前端·npm·node.js