vue2 el-table指定某些数据不参与排序

vue2 el-table指定某些数据不参与排序

  • 1、需求描述
  • 2、配置属性方法
  • 3、详细代码如下

1、需求描述

最后一行总计不参与排序

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/0993219dbdb34604b16ea700fe26ae2d.png

2、配置属性方法

el-table 需要配置 @sort-change="soltHandle" 方法
el-table-column 需要配置 sortable="custom"属性

3、详细代码如下

<el-tablev-loading="loading"border:data="stationTableData":header-cell-style="{ 'text-align': 'center' }":cell-style="{ 'text-align': 'center' }"style="width: 100%"height="470"stripe:row-class-name="rowClass"class="table-style"@sort-change="soltHandle"><el-table-columnprop="name"label="电站名称"width="150"></el-table-column><el-table-column prop="province" label="所属省份" width="100"><template slot-scope="{ row }">{{ getChineseName(row.province).value }}</template></el-table-column><el-table-columnprop="operationDate"label="投运时间"width="100"></el-table-column><el-table-columnprop="capacity"label="容量(kWh)"width="120"sortable="custom"></el-table-column><el-table-columnprop="charge"label="充电量(kWh)"width="120"></el-table-column><el-table-columnprop="discharge"label="放电量(kWh)"width="120"></el-table-column><el-table-columnprop="saveElectricity"label="节约电费(元)"width="130"sortable="custom"></el-table-column><el-table-columnprop="customerElectricityRevenue"label="客户电费收益(元)"width="160"sortable="custom"></el-table-column><el-table-columnprop="ownElectricityRevenue"label="结算电费(元)"width="130"sortable="custom"></el-table-column><el-table-column label="操作"><template slot-scope="{ row }"><el-buttonv-if="row.name !== '总计'"type="text"@click="goElectricityBill(row.id)">结算单</el-button></template></el-table-column></el-table>
methods: {soltHandle(column) {console.log(column)//不参与排序的数组let freeGood = []//参与排序的数组let elseFree = []//fieldName 为对应列的proplet fieldName = column.proplet sortingType = column.order//降序if (sortingType == 'descending') {this.stationTableData.forEach((item) => {//在整个tableData中找到不参与排序的所有数据if (!item.id) {//不参与排序的所有数据加到数组中freeGood.push(item)} else {//参与排序的数据elseFree.push(item)}})this.stationTableData = elseFree.sort((a, b) => {if (typeof a[fieldName] == 'string') {return b[fieldName].localeCompare(a[fieldName])} else if (typeof a[fieldName] == 'number') {return b[fieldName] - a[fieldName]}})this.stationTableData = [...this.stationTableData, ...freeGood]} else {this.stationTableData.forEach((item) => {//在整个tableData中找到不参与排序的所有数据if (!item.id) {//不参与排序的所有数据加到数组中freeGood.push(item)} else {//参与排序的数据elseFree.push(item)}})this.stationTableData = elseFree.sort((a, b) => {if (typeof a[fieldName] == 'string') {return a[fieldName].localeCompare(b[fieldName])} else if (typeof a[fieldName] == 'number') {return a[fieldName] - b[fieldName]}})this.stationTableData = [...this.stationTableData, ...freeGood]}},
}

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

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

相关文章

标准偏差与标准误差的区别

在统计学中,有两个关系容易搞混 标准偏差:standard deviation (SD) 标准误差:standard error (SE) 不用很复杂的定义,用下面的一个例子来说明这两个概念 假如一个盒子中有7个球,球号为1~7,从中取25次。那么这25次球号的数学和的期望是多少呢? 这很容易计算,取一次的…

Mysql---安全值守常用语句

文章目录 目录 文章目录 一.用户权限设置 用户设置 元数据查询 Union联合查询 分组查询 字符串函数 总结 一.用户权限设置 用户设置 #用户创建 create user "用户名""%主机名" identified by "密码" #用户删除 drop user 用户名 #用户查询…

Rust语言中Regex正则表达式,匹配和查找替换等

官方仓库&#xff1a;https://crates.io/crates/regex 文档地址&#xff1a;regex - Rust github仓库地址&#xff1a;GitHub - rust-lang/regex: An implementation of regular expressions for Rust. This implementation uses finite automata and guarantees linear tim…

Centos 7 安装 Node.js v16.13.1

二进制安装 Node.js 下载node 16版本wget https://nodejs.org/dist/v16.13.2/node-v16.13.2-linux-x64.tar.xz 解压xz xz -d node-v16.13.2-linux-x64.tar.xz 注&#xff1a;xz 找不到命令需要执行 yum install xz.x86_64 -y 解压tar tar xvf node-v16.13.2-linux-x64.tar 转移…

8.HelloWorld小案例

文章目录 一、Java程序开发运行流程如何理解编译&#xff1f; 二、HelloWorld案例的编写1、新建文本文档文件&#xff0c;修改名称为HelloWorld.java。2、用记事本打开HelloWorld.java文件&#xff0c;输写程序内容。代码要跟我编写的完全保持一致。3、ctrl s 保存&#xff0c…

CSS面试题常用知识总结day02

大家好我是没钱的君子下流坯&#xff0c;用自己的话解释自己的知识 前端行业下坡路&#xff0c;甚至可说前端已死&#xff0c;我还想在前段行业在干下去&#xff0c;所以从新开始储备自己的知识。 从CSS——>Javascript——>VUE2——>Vuex、VueRouter、webpack——>…

从MVC 到DDD 架构

目录 一、前言 二、MVC架构 三、DDD架构 四、我为什么会使用DDD&#xff1f; 五、DDD架构分层 一、前言 最近在做一个项目&#xff0c;使用的是DDD架构思&#xff0c;觉得很不错&#xff0c;在此记录下。 二、MVC架构 MVC是一种经典的软件架构模式&#xff0c;主要用于…

前端框架的简单介绍

html html-结构 盖房子之前先划三室二厅 &#xff08;超文本标记语言&#xff09;(可以实现一切的文本) css css-样式 在房里添家具 &#xff08;层叠样式单&#xff09;(化妆在脸上叠加) javascript(js) javascript(js)-交互(行为) 我点击你打开 供显示信息的元…

http模块 url对象的主要属性

在 Node.js 中&#xff0c;URL 对象是一个内置类&#xff0c;用于解析和操作 URL 字符串。URL 对象具有多个属性&#xff0c;这些属性提供了对 URL 不同部分的访问。以下是URL对象的一些主要属性及其含义&#xff1a; &#xff08;1&#xff09;href 返回完整的 URL 字符串。…

【小白版】AI 答疑

现在的AI和过去的有什么差别&#xff1f; 过去的AI更像设定好答案的机器人&#xff0c;而现在的AI的答案不再确定。 根本在于背后的数据量级别不一样了。所以&#xff0c;现在的AI表现更接近一个人的理解能力。 AGI是什么&#xff1f; AI分成 ANI 和 AGI&#xff0c;分别为人…

【爬虫基础】第5讲 AJAX动态页面的数据获取

静态&#xff1a;访问地址栏里的数据就可以获取到想要的数据 动态&#xff1a;访问地址栏里的数据获取不到想要的数据 解决方案&#xff1a;抓包 打开浏览器的开发者工具-network-xhr,找到可以获取到数据的URL访问即可 获取url地址 代码实现&#xff1a; from urllib.request…

aws 入门篇 01.aws学习的方法论

aws入门篇 01.aws学习的方法论 第1章 aws学习的方法论 aws的服务很多&#xff0c;现在应该有100多个服务了&#xff0c;怎么来学习aws呢&#xff1f; 这几年也使用了一些aws的服务&#xff0c;谈谈自己对学习aws的理解。 1.先横向&#xff0c;后纵深 比如说&#xff0c;aws最…

短剧崛起:XR虚拟拍摄技术引领影视创新新纪元

短剧崛起&#xff1a;XR虚拟拍摄技术引领影视创新新纪元 随着数字技术的飞速发展&#xff0c;短剧作为一种新兴的影视形式&#xff0c;正以其短小精悍、内容丰富的特点迅速占领市场。而在这一波短剧热潮中&#xff0c;XR虚拟拍摄技术的崛起更是为影视制作带来了前所未有的革新。…

MFC 截取对话框生成图片、截取整个屏幕(可取黑白反色或者整体图片取反色)

HWND hwnd ::GetDesktopWindow();//截整个屏幕&#xff0c;用从这往下4句HDC hdc ::GetDC(hwnd);CDC dc;dc.Attach(hdc);CRect rc,rcw;GetWindowRect(&rcw);GetClientRect(&rc);//只截对话框&#xff0c;用这句//rc.SetRect(0, 0, GetSystemMetrics(SM_CXSCREEN), Ge…

自动驾驶传感器:惯性导航IMU原理

自动驾驶传感器&#xff1a;惯性导航IMU原理 附赠自动驾驶学习资料和量产经验&#xff1a;链接 组合导航里包含了GNSS卫星导航模块与IMU惯性导航模块&#xff0c;前一篇文章写了GNSS模块&#xff0c;本章写IMU惯导&#xff0c;也是本系列最后一篇文章。 1. 惯性测量单元&…

瑞_23种设计模式_观察者模式

文章目录 1 观察者模式&#xff08;Observer Pattern&#xff09;1.1 介绍1.2 概述1.3 观察者模式的结构1.4 观察者模式的优缺点1.5 观察者模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 JDK中提供的观察者模式实现 ★4.1 Observable类4.2 Obse…

Spark分区表插入数据清空分区数据问题的解决办法

原本希望通过Spark的DataFrame的saveAsTable自动创建 然后再通过insertInto或者别的方式插入分区&#xff0c;结果发现这些方法都不可行&#xff0c;每一次运行会自动truncate清空原来的数据。哪怕是加了条件判断&#xff0c;通过createOrReplaceGlobalTempView的方式去执行Spa…

05. 【Android教程】Android 程序签名打包

在上一章&#xff0c;我们创建了自己的 Android 工程&#xff0c;并成功的在模拟器中运行起来。同时提到&#xff0c;工程目录中有一个 bin 目录&#xff0c;运行之后我们可以在此目录下找到我们的 apk。那么不难想到&#xff0c;我们在点“Run”之后&#xff0c;系统会编译我们…

蓝桥杯嵌入式之串口(中断读取)

一、CUbeMX开启串口 1.开启串口USART1 记得手动开起PA9、PA10 2.配置波特率、开启串口中断 3.初始化开启接收中断 定于接收缓存区接收长度&#xff08;单位字节&#xff09; 4.在接收事件回调函数中进行操作 sscanf((char*)usart_box,"%4s",temp1); //只取收到的…

高频SQL 产品销售分析 I

题目信息 销售表 Sales&#xff1a; -------------------- | Column Name | Type | -------------------- | sale_id | int | | product_id | int | | year | int | | quantity | int | | price | int | -------------------- (sale_id, yea…