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

news2024/11/25 14:56:31

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]
        }
      },
}

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

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

相关文章

牛客周赛 Round 38(A,B,C,D,E,F,G)

比赛链接 官方讲解&#xff08;不分P不分段直接两小时怼上来是坏文明 &#xff09; 这场的题很棒&#xff0c;思维有难度&#xff0c;考察的知识点广泛&#xff0c;有深度&#xff0c;很透彻。感觉学到了很多。建议补题。 A 小红的正整数自增 思路&#xff1a; 签到。 可以…

uniapp开发微信小程序分包问题

现象 当我们开发完成小程序后&#xff0c;上传时&#xff0c;出现上传失败&#xff0c;此时就需要我们进行分包处理。 1.未分包之前 我们可以点击本地代码&#xff0c;进行查看 可以看到都是主包&#xff0c;表示没有进行分包处理。 2.在HBuilder X中点击源码视图 3.在mp-we…

rabbitMQ版本问题与下载

都到现在了&#xff0c;大家不会安装东西还是不看版本吧 云服务器买的是centos7&#xff0c;而erlang在24版本后不支持centos7了 所以需要找24版本以下的erlang&#xff0c;而不同erlang对应不同rabbitmq所以需要对应 下载erlang 说实话&#xff0c;自己安装&#xff0c;还是…

机器学习 - 创建多类别的数据

可以用到 scilit-learn 里的 make_blobs() 方法。这个方法用于生成聚类数据集&#xff0c;也用于测试和调试聚类算法。 import torch import matplotlib.pyplot as plt from sklearn.datasets import make_blobs from sklearn.model_selection import train_test_split NUM…

Mybatis-特殊SQL的执行

1. 模糊查询 在MyBatis中进行模糊查询时&#xff0c;有以下三种常见的实现方式&#xff1a; 1.1. 错误示范 先来个准备操作&#xff0c;并做一个错误示例 根据姓名&#xff0c;模糊查询用户&#xff0c;(x小x) 更新数据表 SQLMapper.java package com.sakurapaid.mybatis3…

pytest--python的一种测试框架--pytest初阶

前言 使用pytest去做测试时我们对文件名的命名其实是有规范的&#xff0c;要用test_开头&#xff01;&#xff01;&#xff01; 一、pytest初阶 def test_one():expect1actual1assert expectactual#测试专用语句&#xff1a;assert&#xff0c;识别期望与实际值是否相等这个…

Vue系列-el挂载

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>el:挂载点</title> </head> <body&g…

Mac上Matlab_R2023b ARM 版 启动闪退(意外退出)解决方法

安装好后&#xff0c;使用 "libmwlmgrimpl.dylib" 文件替换掉"/Applications/Matlab_R2023b.app/bin/maca64/matlab_startup_plugins/lmgrimpl"文件夹下的同名文件 在终端下执行如下命令&#xff1a; codesign --verbose --force --deep -s - /Applicat…

npm淘宝镜像源更新

目录 前情提要&#xff1a; 背景&#xff1a; 镜像源更新&#xff1a; 清楚缓存&#xff1a; 直接切换镜像源&#xff1a; 注&#xff1a;npm 补充&#xff1a; 错误解释&#xff1a; 解决方法&#xff1a; 前情提要&#xff1a; 2024 /1 /22 &#xff0c;registry.npm…

Python面对对象 - 类的反射机制

Python面对对象类的反射机制是面向对象编程语言中比较重要的功能&#xff0c;可以动态获取对象信息以及动态调用对象。通过字符串形式的类名或属性来访问对应类或属性。 一、对象的反射 1. getattr 获取指定字符串名称的对象属性、方法&#xff1a; 当访问的属性不存在时&#…

IPv6-重定向,PMTU,GRE隧道

IPv6-重定向&#xff0c;PMTU&#xff08;路径最大传输单元&#xff09;&#xff0c;GRE隧道&#xff08;Generic Routing Encapsulation&#xff0c;通用路由封装协议&#xff09; 重定向过程 触发重定向的条件&#xff1a; 1、报文的入接口&#xff0c;等于自身路由之后的…

深入理解SQLite:存储引擎、索引、事务与锁

文章目录 一、存储引擎二、索引的数据结构和类型2.1 B-Tree2.2 其他类型的索引2.3 小结 三、事务处理中的一致性问题3.1 脏读&#xff08;Dirty Read&#xff09;3.2 不可重复读&#xff08;Non-repeatable Read&#xff09;3.3 幻读&#xff08;Phantom Read&#xff09;3.4 小…

RVM安装Ruby笔记(Mac)

环境 硬件&#xff1a;Macbook Pro 系统&#xff1a;macOS 14.1 安装公钥 通过gpg安装公钥失败&#xff0c;报错如下&#xff1a; 换了几个公钥地址&#xff08;hkp://subkeys.pgp.net&#xff0c;hkp://keys.gnupg.net&#xff0c;hkp://pgp.mit.edu&#xff09;&#xff0c;…

mac怎么删除python

mac 默认安装了python2&#xff1b;自己后面又安装了python3&#xff1b;为了方便&#xff0c;现在想将python3换成Anaconda3。 Anaconda是一个开源的Python发行版本&#xff0c;其包含了conda、Python等180多个科学包及其依赖项。 Python3安装之后&#xff0c;在系统中不同目…

记录el-table的表格合并问题

项目需求背景&#xff1a; 利用el-table进行数据展示时&#xff0c;时常会有需要表格合并的情景&#xff0c;比如一个表格由5列组成&#xff1a; 类型 地区 金额 重量 长度 在这个表格里&#xff0c;如果同金额、重量的列可以合并到一起&#xff0c;这时应该怎么做呢&#xff1…

神经网络与深度学习(一)

线性回归 定义 利用数理统计中回归分析&#xff0c;来确定两种或两种以上变量间相互依赖的定量关系的一种统计分析方法 要素 训练集&#xff08;训练数据&#xff09;输出数据拟合函数数据条目数 场景 预测价格&#xff08;房屋、股票等&#xff09;、预测住院时间&#…

计算机网络 - 基础篇总结

TCP/IP 网络模型有哪几层&#xff1f; 1.应用层 为用户提供应用功能 2.传输层 负责为应用层提供网络支持 使用TCP和UDP 当传输层的数据包大小超过 MSS&#xff08;TCP 最大报文段长度&#xff09; &#xff0c;就要将数据包分块&#xff0c;这样即使中途有一个分块丢失或损坏…

汇总:五个开源的Three.js项目

Three.js 是一个基于 WebGL 的 JavaScript 库&#xff0c;它提供了一套易于使用的 API 用来在浏览器中创建和显示 3D 图形。通过抽象和简化 WebGL 的复杂性&#xff0c;Three.js 使开发者无需深入了解 WebGL 的详细技术就能够轻松构建和渲染3D场景、模型、动画、粒子系统等。 T…

OSI七层参考模型

osi即开放系统互联参考模型。 osi的目的是为了解决主机间的通信 从下到上&#xff1a;物理层、数据链路层、网络层、传输层、会话层、表示出、应用层 上三层&#xff08;应用层、表示出、会话层&#xff09;负责产生数据&#xff0c;下四层&#xff08;传输层、网络层、数据…

设计模式(9):外观模式

一.迪米特法则(最少知识原则) 一个软件实体应当尽可能少的与其他实体发生相互作用。 二.外观模式 为子系统提供统一的入口&#xff0c;封装子系统的复杂性&#xff0c;便于客户端调用。它的核心是什么呢&#xff0c;就是为我们的子系统提供一个统一的入口&#xff0c;封装子…