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.rhkb.cn/news/293480.html

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

相关文章

单链表的插入和删除

一、插入操作 按位序插入&#xff08;带头结点&#xff09;&#xff1a; ListInsert(&L,i,e):插入操作。在表L中的第i个位置上插入指定元素e。 typedef struct LNode{ElemType data;struct LNode *next; }LNode,*LinkList;//在第i 个位置插插入元素e (带头结点) bool Li…

Bridge Champ与Ignis公链:探索Web3游戏的新未来

在数字化和去中心化的浪潮中&#xff0c;Web3游戏与公链的融合为游戏行业带来了新的变革。特别是&#xff0c;Bridge Champ和Ignis公链的结合&#xff0c;展示了一种全新的游戏生态模式&#xff0c;不仅为玩家提供了更加公平、透明的游戏体验&#xff0c;同时也为游戏开发和运营…

Day50:WEB攻防-PHP应用文件包含LFIRFI伪协议编码算法无文件利用黑白盒

目录 文件包含-原理&分类&利用&修复 文件读取 文件写入 代码执行 远程利用思路 黑盒利用-VULWEB 白盒利用-CTFSHOW-伪协议玩法 78-php&http协议 79-data&http协议 80-81-日志包含 87-php://filter/write&加密编码 88-data&base64协议 …

磐启/PAN7030/2.4GHz 无线收发SOC芯片/ESSOP10/SOP16

1 概述 PAN7030 是一款集成 8 位 OTP MCU 和 2.4GHz 无线收发电路芯片&#xff0c;适合应用于玩具小车、 遥控器等领域。 PAN7030 内置 8 位 OTP MCU&#xff0c;包括 1.25KW 的程序存储器、80 字节数据存储器、16 位定 时器和 8 位/11 位 PWM 定时器、看门狗、电压比较器等…

Ubuntu18.04 下Ublox F9P 实现RTK (利用CORS服务无需自建基站)

本内容参考如下连接:Ubuntu下Ublox F9P利用CORS服务无需自建基站实现RTK-CSDN博客 一、Ublox F9P 硬件模块示意图 图中展示了Ublox F9P的接口,包括串口2(`UART1`和`UART2`),USB1。需要人为通过u-center(Ublox F9P的显示软件)软件设置以下功能: Ublox通过`UART1`向PC端发送…

Go的数据结构与实现【Binary Search Tree】

介绍 本文用Go将实现二叉搜索树数据结构&#xff0c;以及常见的一些方法 二叉树 二叉树是一种递归数据结构&#xff0c;其中每个节点最多可以有两个子节点。 二叉树的一种常见类型是二叉搜索树&#xff0c;其中每个节点的值都大于或等于左子树中的节点值&#xff0c;并且小…

脑机辅助推导算法

目录 一&#xff0c;背景 二&#xff0c;华容道中道 1&#xff0c;问题 2&#xff0c;告诉脑机如何编码一个正方形格子 3&#xff0c;让脑机汇总信息 4&#xff0c;观察图&#xff0c;得到启发式算法 5&#xff0c;根据启发式算法求出具体解 6&#xff0c;可视化 一&am…

centos7.5安装gitlab-runner,配置CI/CD流水线

一般不建议gitlab-server和gitlab-runner装在同一台服务器 第一步&#xff1a;安装gitlab-runner,最好和gitlab实例版本一致 # 下载官方gitlab-runner安装脚本 curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh" | s…

时序预测 | Python实现VMD-CNN-LSTM时间序列预测

时序预测 | Python实现VMD-CNN-LSTM时间序列预测 目录 时序预测 | Python实现VMD-CNN-LSTM时间序列预测预测效果基本介绍模型描述代码设计预测效果 基本介绍 VMD-CNN-LSTM 是一种混合深度学习模型,结合了变分模态分解(VMD)、卷积神经网络(CNN)和长短期记忆网络(LSTM)的…

【spring】@Autowired注解学习

Autowired介绍 Spring框架是Java领域中一个非常重要的企业级应用开发框架&#xff0c;它提供了全面的编程和配置模型&#xff0c;旨在帮助开发者更快速、更简单地创建应用程序。在Spring框架中&#xff0c;Autowired是一个非常重要的注解&#xff0c;它用于实现依赖注入&#…

Chatopera 云服务的智能问答引擎实现原理,如何融合 #聊天机器人 技术 #Chatbot #AI #NLP

观看视频 Bilibili: https://www.bilibili.com/video/BV1pZ421q7EH/YouTube: https://www.youtube.com/watch?vx0d1_0HQa8o 内容大纲 提前在浏览器打开网址&#xff1a; Chatopera 云服务&#xff1a;https://bot.chatopera.comChatopera 入门教程&#xff1a;https://dwz…

Web应急响应

2024年护网将至&#xff0c;最近我将分享一些红蓝对抗的一些技巧&#xff0c;应急响应、信息收集相关的知识概念以及相关技巧。 目录 1. 黑客攻击流程 2. webshell流量特征 1.1.菜刀特征 1.2.冰蝎3.0 &#xff1a; 1.3.冰蝎2.0&#xff1a; 1.4.冰蝎3.11流量特征 1.5.蚁…

LeetCode-56. 合并区间【数组 排序】

LeetCode-56. 合并区间【数组 排序】 题目描述&#xff1a;解题思路一&#xff1a;排序&#xff1f;怎么排&#xff1f;当然是排各个区间的左边界&#xff0c;然后判断下一个边界的左边界与结果数组里面的右边界是否重叠。解题思路二&#xff1a;优化解题思路三&#xff1a;0 题…

MongoDB Atlas维护指南:常见类型、注意事项与窗口设置

为了给Atlas用户更好的产品体验&#xff0c;MongoDB产品团队会进行定期维护。 本文将会介绍&#xff1a; 常见维护项目种类及频率&#xff0c;注意事项维护期间的影响及建议维护窗口设置说明维护告警设置和邮件通知范例 维护窗口常见项目 定期SSL证书轮换软件升级&#xff…

基于单片机16位智能抢答器设计

**单片机设计介绍&#xff0c;基于单片机16位智能抢答器设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机16位智能抢答器设计是一个结合了单片机技术、显示技术、按键输入技术以及声音提示技术的综合性项目。其设计…

【QT】setContextMenuPolicy()函数用法

在Qt中&#xff0c;setContextMenuPolicy() 是一个相当通用的方法&#xff0c;几乎所有的继承自 QWidget 或其派生类的图形用户界面控件都可以使用该方法来设置它们的上下文菜单策略。这意味着&#xff0c;包括但不限于以下常见的Qt GUI控件都能使用 setContextMenuPolicy() 来…

ssm 科研奖励申报管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 ssm 科研奖励申报管理系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用…

Python数据分析与可视化笔记 七 Numpy ndarray

多维数组对象ndarray&#xff0c;常用属性如下所示 import numpy as nparr np.array([[1,2,3],[4,5,6]]) print(arr.shape) #ndarray各维度的长度 print(arr.ndim) #ndarray的维度 print(arr.size) #ndarray中元素的个数&#xff0c;相当于各维度长度的乘积 print(arr.dtyp…

iOS问题记录 - App Store审核新政策:隐私清单 SDK签名(持续更新)

文章目录 前言开发环境问题描述问题分析1. 隐私清单 & SDK签名1.1. 隐私清单 - 数据使用声明1.2. 隐私清单 - 所用API原因描述1.3. SDK签名 2. 即将发布的第三方SDK要求 解决方案最后 前言 前段时间用Flutter开发的iOS App提交了新版本&#xff0c;结果刚过两分钟就收到了…

智慧公厕四大核心能力,赋能城市公共厕所智能化升级

公共厕所是城市基础设施中不可或缺的一部分&#xff0c;但由于传统的公共厕所在建设与规划上&#xff0c;存在一定的局限性&#xff0c;导致环境卫生差、管理难度大、使用体验不佳等问题&#xff0c;给市民带来了很多不便。而智慧公厕作为城市智能化建设的重要组成部分&#xf…