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.hqwc.cn/news/573412.html

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

相关文章

Go的数据结构与实现【Set】

介绍 Set是值的集合&#xff0c;可以迭代这些值、添加新值、删除值并清除集合、获取集合大小并检查集合是否包含值&#xff0c;集合中的一个值只存储一次&#xff0c;不能重复。 本文代码地址为go-store 简单实现 这是集合的一个简单实现&#xff0c;还不是并发安全的&#…

Android 性能优化(六):启动优化的详细流程

书接上文&#xff0c;Android 性能优化&#xff08;一&#xff09;&#xff1a;闪退、卡顿、耗电、APK 从用户体验角度有四个性能优化方向&#xff1a; 追求稳定&#xff0c;防止崩溃追求流畅&#xff0c;防止卡顿追求续航&#xff0c;防止耗损追求精简&#xff0c;防止臃肿 …

机器学习——聚类算法-KMeans聚类

机器学习——聚类算法-KMeans聚类 在机器学习中&#xff0c;聚类是一种无监督学习方法&#xff0c;用于将数据集中的样本划分为若干个簇&#xff0c;使得同一簇内的样本相似度高&#xff0c;不同簇之间的样本相似度低。KMeans聚类是一种常用的聚类算法之一&#xff0c;本文将介…

外包干了15天,技术退步明显。。。。。。

说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&a…

开源博客项目Blog .NET Core源码学习(12:App.Application项目结构分析)

开源博客项目Blog的App.Application项目主要定义网站页面使用的数据类&#xff0c;同时定义各类数据的增删改查操作接口和实现类。App.Application项目未安装Nuget包&#xff0c;主要引用App.Core项目的类型。   App.Application项目的顶层文件夹如下图所示&#xff0c;下面逐…

蓝桥杯刷题-分巧克力

分巧克力 二分&#xff1a; N, K map(int, input().split()) w, h [], [] for i in range(N):cur_w, cur_h map(int, input().split())w.append(cur_w)h.append(cur_h)# 判断是否能分成K个及以上的巧克力 def check(a) -> bool: num 0for i in range(N):num (w[i] // …

3月份的倒数第二个周末有感

坐在图书馆的那一刻&#xff0c;忽然感觉时间的节奏开始放缓。今天周末因为我们两都有任务需要完成&#xff0c;所以就选了嘉定图书馆&#xff0c;不得不说嘉定新城远香湖附近的图书馆真的很有感觉。然我不经意回想起学校的时光&#xff0c;那是多么美好且短暂的时光。凝视着窗…

MySQL---事务

目录 一、事务简介 二、事务操作 1.未控制事务 2.事务控制一 3.控制事务二 三、事务的四大特性 四、并发事务问题 五、事务隔离级别 一、事务简介 事务 是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或…

Android-Handler详解_使用篇

本文我将从Handler是什么、有什么、怎们用、啥原理&#xff0c;四个方面去分析。才疏学浅&#xff0c;如有错误&#xff0c;欢迎指正&#xff0c;多谢。 1.是什么 因为Android系统不允许在子线程访问UI组件&#xff0c;否则就会抛出异常。所以咱们平实用的最多的可能是在子线…

Leetcode239_滑动窗口最大值

1.leetcode原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.题目描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口…

python实战之宝塔部署flask项目

一. 项目 这个demo只是提供了简单的几个api接口, 并没有前端页面 # -*- coding: utf-8 -*- import flask as fk from flask import jsonify, requestapp fk.Flask(__name__)app.route(/api/hello, methods[GET]) def get_data():return hello world# 假设我们要提供一个获取用…

Vue3气泡卡片(Popover)

效果如下图&#xff1a;在线预览 APIs 参数说明类型默认值必传title卡片标题string | slot‘’falsecontent卡片内容string | slot‘’falsemaxWidth卡片内容最大宽度string | number‘auto’falsetrigger卡片触发方式‘hover’ | ‘click’‘hover’falseoverlayStyle卡片样式…