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-table
   v-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-column
     prop="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-column
     prop="operationDate"
     label="投运时间"
     width="100"
   ></el-table-column>
   <el-table-column
     prop="capacity"
     label="容量(kWh)"
     width="120"
     sortable="custom"
   ></el-table-column>
   <el-table-column
     prop="charge"
     label="充电量(kWh)"
     width="120"
   ></el-table-column>
   <el-table-column
     prop="discharge"
     label="放电量(kWh)"
     width="120"
   ></el-table-column>
   <el-table-column
     prop="saveElectricity"
     label="节约电费(元)"
     width="130"
     sortable="custom"
   ></el-table-column>
   <el-table-column
     prop="customerElectricityRevenue"
     label="客户电费收益(元)"
     width="160"
     sortable="custom"
   ></el-table-column>
   <el-table-column
     prop="ownElectricityRevenue"
     label="结算电费(元)"
     width="130"
     sortable="custom"
   ></el-table-column>

   <el-table-column label="操作">
     <template slot-scope="{ row }">
       <el-button
         v-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 为对应列的prop
        let fieldName = column.prop
        let 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]
        }
      },
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

giteed的使用

1. 将工作区的内容添加到暂存区 你的工作区要有内容&#xff08;.git 不算&#xff09; 注意&#xff1a;空文件可以添加&#xff0c;但是空文件夹不管 如果没有形成历史版本之前&#xff0c;暂存区的同名文件会被覆盖 //打开命令行&#xff0c;切换到 .git所在的目录&…

spark 参数

spark.yarn.executor.memoryOverhead 默认值是384M Configuration - Spark 3.5.1 Documentation

4毛5起的国产32位单片机 PY32F002A系列,多种封装可以选择

PY32F002A系列单片机可以说是现在市面上非常火的一款32位单片机了&#xff0c;超低的价格&#xff0c;不错的性能&#xff0c;让很多开发者都选择了它。主频最大24M&#xff0c;有着20Kbytes flash 和 3Kbytes SRAM&#xff0c;很多小产品也是足够用了。PY32F002A的SOP8封装的价…

创建Qt Quick Projects

在创建Qt Quick项目之前&#xff0c;我们简单说一下Qml和Qt Quick的关系&#xff1a;它们的关系类似于C和STL标准库的关系&#xff0c;Qml类比C语言&#xff0c;提供了基本语言特性和类型&#xff1b;而Qt Quick则类比STL标准库&#xff0c;Qt Quick在QML的基础上加入了一系列界…

如何在 Mac/Windows 上从 iPhone 备份中恢复短信?

- “如何从 iPhone 备份中提取短信&#xff1f;” 短信正在取代日常生活和工作中的电话和电子邮件。 iPhone 上的短信现在是您与朋友、家人、亲人和同事最重要的沟通方式之一。有时&#xff0c;您可能想在 iPhone 上保留一些您不想丢失的特殊消息&#xff0c;也许这是朋友的一…

工控自动化行业 工业数据采集软件 让数据驱动决策

在当今的工控自动化行业&#xff0c;数据已经成为了企业决策的关键驱动力。而工业数据采集软件的出现&#xff0c;更是为企业带来了新的机遇。 工业数据采集软件平台能够高效地采集各种工业设备的数据&#xff0c;无论是传感器、仪器仪表还是生产线上的关键参数等&#xff0c;都…

春秋云境CVE-2023-1313

简介 cockpit在2.4.1版本之前存在任意文件上传漏洞PS&#xff1a;通过在浏览器中打开/install来运行安装 正文 来到靶场&#xff0c;首先进行弱口令爆破&#xff0c;发现没用&#xff0c;那么只好老老实实的看靶场提示 先来访问/install 访问后就可以进行登录了&#xff0c…

监控系统介绍

文章目录 监控系统的分类日志类(logs)调用链类(tracing)度量类(metrics) 监控系统的分层监控系统典型架构采集器TelegrafExportersGrafana-Agent 时序库OpenTSDBInfluxDBTDEngineM3DBVictoriaMetricsTimescaleDBPrometheus 告警引擎数据展示 监控系统的分类 针对不同场景把监控…

分享多种mfc100u.dll丢失的解决方法(一键修复DLL丢失的方法)

在使用电脑过程中&#xff0c;我们经常会遇到一些陌生的DLL文件&#xff0c;例如mfc100u.dll。这些DLL文件是动态链接库&#xff08;Dynamic Link Libraries&#xff09;的缩写&#xff0c;它们包含了可以被多个程序共享的代码和数据。今天&#xff0c;我们将深入探讨mfc100u.d…

基于云计算的前端资源管理系统的设计与实现

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验&#xff01;希望我的分享能帮助到您&#xff01;如需帮助可以评论关注私信我们一起探讨&#xff01;致敬感谢感恩&#xff01; 随着互联网的快速发展&#xff0c;前端资源管理成为了一个重要的课题。本文旨在设计并实…

鸿蒙HarmonyOS应用开发之使用Node-API实现跨语言交互开发流程

使用Node-API实现跨语言交互&#xff0c;首先需要按照Node-API的机制实现模块的注册和加载等相关动作。 ArkTS/JS侧&#xff1a;实现C方法的调用。代码比较简单&#xff0c;import一个对应的so库后&#xff0c;即可调用C方法。 Native侧&#xff1a;.cpp文件&#xff0c;实现模…

electron打包桌面版.exe之vue项目踩坑(vue3+electron 解决打包后首页打开空白,打包后路由不跳转及请求不到后端数据等问题)

vue项目https://www.qingplus.cn/components-web/index打包桌面版问题集合 一、静态资源加载问题 npm run electron_dev桌面版运行后页面空白&#xff0c;内容未加载。 填坑&#xff1a; 打包配置要用相对路径 vite.config.ts文件中的base要改成./&#xff0c;之前加了项目…

systemd-journal(四)之systemd-journald.service

文章目录 写在前面概述描述流日志记录&#xff08;Stream logging&#xff09;日志命名空间&#xff08;Journal Namespaces&#xff09;信号 SignalsSIGUSR1SIGUSR2SIGRTMIN1 内核命令行 Kernel Command Linesystemd.journald.forward_to_syslogsystemd.journald.forward_to_k…

Xilinx IDDR及ODDR使用和仿真

平台&#xff1a;Vivado2018 官方相关文档&#xff0c;ug471_7Series_SelectIO.pdf 关于IDDR与ODDR Input DDR Resource(IDDR) 外部的数据在时钟的上下沿同时传输数据&#xff0c;我们可以使用IDDR原语将输入的单bit数据转化为2bit的数据输出。同时数据速率变为原来的二分之一…

gopher伪协议

基础知识 基本格式 基本格式&#xff1a;URL:gopher://<host>:<port>/<gopher-path>web也需要加端口号80gophert协议默认端口为70gopheri请求不转发第一个字符 get请求 问号&#xff08;&#xff1f;)需要转码为URL编码&#xff0c;也就是%3f回车换行要变…

【Linux】进程状态(R运行状态、S睡眠状态、D磁盘休眠状态、T停止状态、X死亡状态)

目录 01.运行状态 02.睡眠状态 03.磁盘睡眠状态 04.停止状态 05.死亡状态 进程的状态会随着操作系统的调度和外部事件的发生而不断地发生转换。例如&#xff0c;一个新创建的进程经过初始化后会进入就绪态&#xff0c;等待被调度执行&#xff1b;当调度器分配处理器资源给…

什么是物联网监控平台?部署物联网平台有什么作用?

随着物联网技术的飞速发展&#xff0c;越来越多的企业开始关注并投入到这一领域。物联网监控平台作为连接物理世界与数字世界的桥梁&#xff0c;正逐渐成为企业数字化转型的关键组件。今天&#xff0c;我们将深入探讨物联网监控平台的定义、部署物联网平台的作用&#xff0c;以…

OSPF-区域间路由计算

一、概述 前面学习了我们学习了Router-LSA和Network-LSA&#xff0c;它们都只能在区域内进行泛洪&#xff0c;而且我们之前一直主要是单区域学习。OSPF的核心是骨干区域Area 0&#xff0c;其它都为非骨干区域。但是在大型网络中&#xff0c;单区域OSPF会存在一定的问题&#xf…

数据处理库Pandas数据结构DataFrame

Dataframe是一种二维数据结构&#xff0c;数据以表格形式&#xff08;与Excel类似&#xff09;存储&#xff0c;有对应的行和列&#xff0c;如图3-3所示。它的每列可以是不同的值类型&#xff08;不像 ndarray 只能有一个 dtype&#xff09;。基本上可以把 DataFrame 看成是共享…

libVLC 视频抓图

Windows操作系统提供了多种便捷的截图方式&#xff0c;常见的有以下几种&#xff1a; 全屏截图&#xff1a;通过按下PrtSc键&#xff08;Print Screen&#xff09;&#xff0c;可以截取整个屏幕的内容。截取的图像会保存在剪贴板中&#xff0c;可以通过CtrlV粘贴到图片编辑工具…