解决el-table排序sortable只排序当前页问题

el-table-column中添加sortable只是让每页数据单独排序,没有把所有数据进行排序,可以通过sort-change事件解决。

1、首先在需要排序的列上加sortable=“custom”

 <el-table-columnprop="date"label="日期"width="180"sortable="custom"></el-table-column>

2、在el-table中加@sort-change=“sortChange”

 <el-table:data="tableData"style="width: 100%"@sort-change="sortChange">

3、最后添加排序方法sortChange,其中column.prop是属性名,column.order是排序方式

sortChange(column){ var type="";for(var i=0;i<this.tableData.length;i++){if(this.tableData[i][column.prop]!=null&&this.tableData[i][column.prop]!=undefined&&this.tableData[i][column.prop]!=''){type=typeof(this.tableData[i][column.prop]);break;}}if(this.tableData.length>0&&type!=""){if(column.order=="ascending"){this.tableData=this.tableData.sort((a,b)=>{if(a[column.prop]==undefined||a[column.prop]==null){a[column.prop]='';} if(b[column.prop]==undefined||b[column.prop]==null){b[column.prop]='';}if(type=="number"){return a[column.prop]-b[column.prop]}else{return a[column.prop].localeCompare(b[column.prop])}})}else if(column.order=="descending"){this.tableData=this.tableData.sort((a,b)=>{if(a[column.prop]==undefined||a[column.prop]==null){a[column.prop]='';} if(b[column.prop]==undefined||b[column.prop]==null){b[column.prop]='';}if(type=="number"){return b[column.prop]-a[column.prop]}else{return b[column.prop].localeCompare(a[column.prop])}               })}}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/52784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++(2)之Linux多线程服务端编程总结

C之Linux多线程服务端编程读书笔记 Author: Once Day Date: 2023年1月31日/2024年8月23日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: Linux实践…

C++:类与对象

一、面向对象编程 (一) 面向过程vs面向对象 面向过程&#xff08;Procedural-Oriented-Programming&#xff0c; POP&#xff09;和面向对象&#xff08;Object-Oriented-Programming&#xff0c;OOP&#xff09;&#xff0c;是两种典型的编程范式&#xff0c;通常是作为划分编…

Flume:大规模日志收集与数据传输的利器

Flume&#xff1a;大规模日志收集与数据传输的利器 在大数据时代&#xff0c;随着各类应用的不断增长&#xff0c;产生了海量的日志和数据。这些数据不仅对业务的健康监控至关重要&#xff0c;还可以通过深入分析&#xff0c;帮助企业做出更好的决策。那么&#xff0c;如何高效…

频带宽度固定,如何突破数据速率的瓶颈?

目录 目录 引言 信道 频带宽度 信噪比 信噪比的重要性 影响信噪比的因素 码元 码元的特点&#xff1a; 码元与比特的关系&#xff1a; 码元的作用&#xff1a; 码元的类型&#xff1a; Question 类比解释&#xff1a; 技术解释&#xff1a; 引言 在现代通信系统中…

Oracle EBS中AR模块的财务流程概览

应收账款 (AR) 模块是Oracle E-Business Suite (EBS) 中另一个重要的财务管理模块&#xff0c;主要用于管理企业销售过程中的账款回收。下面是AR模块中的一些关键财务流程及其详细说明&#xff1a; 1. 销售订单管理 创建销售订单&#xff1a;当客户下单时&#xff0c;销售人员…

Git 使用教程:从入门到精通

Git 是一个开源的分布式版本控制系统&#xff0c;由 Linus Torvalds 创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。本教程将带你从 Git 的安装开始&#xff0c;逐步学习到如何使用 Git 进行日常的版本控制操作。 安装 Git Windows 访问 Git 官方网站 下载 …

OpenAI o1:AI领域的“草莓”革命,华人科学家贡献卓越

最近&#xff0c;科技界的热门明星“草莓”频繁出现在大家的视线中。9月11号&#xff0c;The Information报道称&#xff1a;OpenAI计划在未来两周内推出一款更智能、更昂贵、更谨慎的AI模型&#xff01;网友们对此消息持怀疑态度&#xff0c;认为类似消息屡见不鲜&#xff0c;…

centos8构建nginx1.27.1+BoringSSL+http3+lua+openresty

需要接入http3&#xff0c;索性最新的nginx在构建一波&#xff0c;趟一遍坑 准备工作 1.环境命令安装 yum install GeoIP -y yum install GeoIP-devel -y yum install libmaxminddb-devel -y yum install -y patch wget zlib zlib-devel lftp gcc gcc-c make openssl-devel p…

Pikachu靶场之csrf

CSRF 跨站请求伪造 CSRF入门及靶场实战 - FreeBuf网络安全行业门户 攻击者伪造恶意链接&#xff0c;诱使用户点击&#xff0c;这个链接附带了用户的认证凭据Cookie、Session等&#xff0c;执行操作如转账。 因为带了cookie、session&#xff0c;服务器认为是用户的行为。借用…

node-red 资料收集

环境搭建 使用echarts折线图制作面板 物联网项目Node-red镜像 docker run -it -p 1880:1880 -v node_red_data:/data --name mynodered nodered/node-red node-red - 节点实战总结 采集服务器配置及软件安装

待机模式中WKUP上升沿模拟开机与关机

本篇博客重点在于标准库函数的理解与使用&#xff0c;搭建一个框架便于快速开发 目录 前言 待机模式 代码 wkup.h wkup.c main.c 使用注意 前言 建议先阅读下面的博客中待机模式部分。本博客主要分享代码-基于待机模式WKUP引脚的上升沿实现类似长按开机与关机的功能…

二维码的原理以及Java生成二维码【中间带图片】

一、什么是二维码&#xff1a; 二维码 &#xff08;2-dimensional bar code&#xff09;&#xff0c;是用某种特定的几何图形按一定规律在平面&#xff08;二维方向上&#xff09; 分布的黑白相间的图形记录数据符号信息的。 二、常用的码制 Data Matrix, Maxi Code, Aztec,…

看看智慧门诊银医通自助服务方案,如何化解医院患者跑难题

“看病三分钟&#xff0c;排队三小时”&#xff0c;这是许多患者在就医过程中的无奈吐槽。挂号队伍长如龙&#xff0c;看病流程繁琐复杂&#xff0c;缴费窗口人满为患&#xff0c;检查报告等待时间漫长…… 这些就医痛点&#xff0c;不仅让患者身心疲惫&#xff0c;也给医院的管…

基于微信小程序+Java+SSM+Vue+MySQL的宿舍管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSSMVueMySQL的宿舍管理系统【附源码文档…

F1C100S/F1C200S的资料来源说明

文章目录 常用板子开源创客荔枝派榴莲派 我想说是的官网啥资料都没有。但是它的资料又很多&#xff0c;从淘宝或者其他地方能都搜到很多。 http://wiki.lcmaker.com/index.php?titleLC-PI-200S https://github.com/peng-zhihui/Planck-Pi?tabreadme-ov-file#head4 http://do…

使用 PyCharm 新建 Python 项目详解

使用 PyCharm 新建 Python 项目详解 文章目录 使用 PyCharm 新建 Python 项目详解一 新建 Python 项目二 配置环境1 项目存放目录2 Python Interpreter 选择3 创建隔离环境4 选择你的 Python 版本5 选择 Conda executable 三 New Window 打开项目四 目录结构五 程序编写运行六 …

虚拟机Linux+Ubuntu操作系统 如何在虚拟机上安装docker VMPro 2024在线激活资源

一般情况下 不建议在windows系统上安装docker Windows本身就自带一个虚拟机叫WSL 但是不推荐在日常使用的电脑上安装 我们要下一个虚拟机 我们在window上安装docker会被告知WSL内核太老 我们要一个专业的 隔离的虚拟机软件 推荐使用虚拟机 这是我们的虚拟机软件 我们这边…

中国电子学会202403青少年软件编程(Python)等级考试试卷(三级)真题与解析

202403Python 三级真题 一、选择题 1.在 Python 中,hex(2023)的功能是?( ) A.将十进制数 2023 转化为十六进制数 B.将十进制数 2023 转化为八进制数 C.将十六进制数 2023 转化为十进制数 D.将八进制数 2023 转化为十进制数 2.下列表达式的值与其他三个选项不相…

Linux 性能优化 copy

如何分析 Linux 系统的性能瓶颈&#xff1f;有哪些工具可以使用&#xff1f; top&#xff1a;查看系统当前运行的进程以及资源占用情况。 vmstat&#xff1a;报告虚拟内存统计信息&#xff0c;包括系统、进程和块设备等方面的信息。 iostat&#xff1a;监视系统I/O活动&#…

深入链表的遍历——快慢指针算法(LeetCode——876题)

今天我们一起来学习一下一个快速遍历链表的方法 我们先来看看一道经典的需要遍历链表的题目 &#xff08;题目来自LeetCode&#xff09; 876. 链表的中间结点https://leetcode.cn/problems/middle-of-the-linked-list/ 给你单链表的头结点 head &#xff0c;请你找出并返回链…