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,一经查实,立即删除!

相关文章

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…

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 字符串。…

【爬虫基础】第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最…

自动驾驶传感器:惯性导航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…

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); //只取收到的…

以太网链路聚合——增加带宽,解决生成树收敛慢的问题

目录 一.对STP生成树的补充 1.STP接口状态 2.STP生成树的改进 二.网络可靠性 1.单板可靠性 2.设备可靠性 3.链路可靠性 三.链路聚合 1.多条链路聚合增加带宽 2.链路聚合术语 四.链路聚合模式 1.手动模式 2.LASP模式 &#xff08;1).LASP术语 &#xff08;2&…

使用itext-core生成PDF

1、添加引用依赖包 <dependency><groupId>com.itextpdf</groupId><artifactId>itext-core</artifactId><version>8.0.3</version><type>pom</type></dependency> 2、上代码 package com.student.demo.pdf;impor…

什么是RISC-V?开源 ISA 如何重塑未来的处理器设计

RISC-V代表了处理器架构的范式转变&#xff0c;特点是其开源模型简化了设计理念并促进了全球community-driven的开发。RISC-V导致了处理器技术发展前进方式的重大转变&#xff0c;提供了一个不受传统复杂性阻碍的全新视角。 RISC-V起源于加州大学伯克利分校的学术起点&#xff…

逐步学习Go-协程goroutine

参考&#xff1a;逐步学习Go-协程goroutine – FOF编程网 什么是线程&#xff1f; 简单来说线程就是现代操作系统使用CPU的基本单元。线程基本包括了线程ID&#xff0c;程序计数器&#xff0c;寄存器和线程栈。线程共享进程的代码区&#xff0c;数据区和操作系统的资源。 线…

前端学习-01:Windows 安装 npm 教程

一、安装 Node.js Node.js 官方下载地址&#xff1a;点击这里点击绿色的"Download Node.js vxxxx"下载完成后双击开始安装点击 Next 接受协议&#xff0c;点击 Next 点击 Change&#xff0c;自定义安装目录&#xff0c;然后点击 Next 所有默认全部安装即可&#xff…

在 Linux CentOS 中安装 Docker Engine(Dockers 引擎)【图文详解】

官方文档&#xff1a;https://docs.docker.com/engine/install/centos/ 操作系统要求 如果我们要在 CentOS 中安装 Docker 引擎&#xff0c;那么 CentOS 操作系统需要是以下版本之一的&#xff0c;且是处于维护的 CentOS 版本&#xff1a; CentOS 7CentOS Stream 8CentOS Str…

【Web应用技术基础】CSS(4)——背景样式

第1题&#xff1a;背景颜色 .html <!DOCTYPE html> <html><head><meta charset"utf-8"><title>Hello World</title><link rel"stylesheet" href"step1/CSS/style.css"> </head><body>&…