当前位置: 首页 > article >正文

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();
      },


http://www.kler.cn/news/307310.html

相关文章:

  • 腾讯云软件工程师面试问题收集记录-数据库
  • redis简单使用与安装
  • Java并发:互斥锁,读写锁,Condition,StampedLock
  • shopify主题开发之template模板解析
  • C++学习笔记----7、使用类与对象获得高性能(一)---- 书写类(3)
  • 蓝桥杯-基于STM32G432RBT6的LCD进阶(LCD界面切换以及高亮显示界面)
  • 【AIGC】CFG:基于扩散模型分类器差异引导
  • JavaScript 函数 function
  • 用 nextjs 创建 Node+React Demo
  • WebGL入门(048):OES_draw_buffers_indexed 简介、使用方法、示例代码
  • Python---爬虫
  • Leetcode-轮转数组
  • 复现OpenVLA:开源的视觉-语言-动作模型及原理详解
  • 【Go开发】Go语言结构体,与java类不一样的定义方式
  • 推荐|基于springBoot智能推荐的卫生健康系统设计与实现(源码+论文+数据库)
  • 【附源码】用Python开发一个音乐下载工具,并打包EXE文件,所有音乐都能搜索下载!
  • el-table 的单元格 + 图表 + 排序
  • 动手学深度学习(pytorch土堆)-03常见的Transforms
  • 图论篇--代码随想录算法训练营第五十六天打卡| 108. 冗余连接,109. 冗余连接II
  • 【SQL】百题计划:SQL排序Order by的使用。
  • Flutter Error: Type ‘UnmodifiableUint8ListView‘ not found
  • 刷题DAY36
  • 初中生物--5.单细胞生物
  • VuePress搭建文档网站/个人博客(详细配置)主题配置-导航栏配置
  • 【开源免费】基于SpringBoot+Vue.JS企业客户管理系统(JAVA毕业设计)
  • Linux命令:文本处理工具sed详解
  • django中F()和Q()的用法
  • 保姆级离线+windows环境+大模型前端UI安装(二)
  • 基于Spring Boot的停车场管理系统的设计与实现
  • 【STL】 set 与 multiset:基础、操作与应用