关于 el-table 的合计行问题

目录

一.自定义合计行

二.合计行不展示,只有缩放/变大窗口或者F12弹出后台时才展示

三.合计行出现了表格滚动条下方

四.合计行整体样式的修改

五.合计行单元格样式修改

1.css

2.jsx方式

六.合计行单元格合并


一.自定义合计行

通过 show-summary 属性开启合计行功能,通过 :summary-method 属性自定义合计行方法。

        <el-table :summary-method="getSummaries" show-summary ref="table">
        </el-table>
    getSummaries(param) {
      // columns 是一个数组,每一项就是每一列表头的内容
      // data 是表格数据,每一项就是每一行 row 的数据
      const { columns, data } = param;
      // sums 是合计行的数据,是一个普通数组,数组每一项内容就是合计行按照顺序展示的内容
      const sums = [];
      columns.forEach((column, index) => {
        // 这里是设置合计行第一列内容位 总计,也可以根据 index 判断,  if (index === 0)
        if (column.property === "trade_id") {
          sums[index] = "合计";
        } else if (
          // 这里是自己需要合计的表头,也可以根据 index 判断,但是为了防止以后顺序打乱,就用 prop 去判断
          column.property === "trade_power" ||
          column.property === "trade_fee"
        ) {
          // values 是该表头下所有数据组成的数组
          const values = data.map((item) => Number(item[column.property]));
          // 这是把数组的所有值都相加再一起,Utils方法是自己定义引入的避免精度缺失的方法,博客别的内容有写
          sums[index] = values.reduce((prev, cur) => {
            return Utils.argAdd(Number(prev), Number(cur));
          }, 0);
        } else {
          // 这里不需要合计的表头 设置展示内容为 ---
          sums[index] = "---";
        }
      });
      return sums;
    },

二.合计行不展示,只有缩放/变大窗口或者F12弹出后台时才展示

不展示的原因:是因为表格刚开始是没有数据的,所以不展示合计行,等获取到数据的时候,表格不会重新渲染dom,所以该合计行还是不展示,缩放窗口或者弹出后台时会导致页面重新渲染,此时合计行才会渲染出来。

解决方法:在获取数据以后调用 el-table 的 doLayout() 方法去重新渲染表格 dom。

      queryTableDataApi(params).then((res) => {
        this.allTableData = res;
        this.$nextTick(() => {
          this.$refs["table"].doLayout();
        });
      });

 或者

  updated() {
    this.$nextTick(() => {
      this.$refs["table"].doLayout();
    });
  },

三.合计行出现了表格滚动条下方

原本合计行在表格下部,我们可以将合计行放在表格上部,也就是第一行。

::v-deep .el-table {
  display: flex;
  flex-direction: column;
}
/* order默认值为0,只需将表格主体order设为1即可移到最后,合计就上移到最上方了 */
::v-deep .el-table__body-wrapper {
  order: 1;
}
// 下面的代码是设置 fixed 后,要根据实际情况所作的修改
::v-deep.el-table__fixed-body-wrapper {
  top: 96px !important;
}
::v-deep .el-table__fixed-footer-wrapper {
  z-index: 0;
}

四.合计行整体样式的修改

::v-deep .el-table .el-table__footer-wrapper tbody td {
  background: black;
  color: white;
  font-weight: bolder;
}

五.合计行单元格样式修改

1.css

比较死板,因为要根据 nth-child(n) 去固定在某一列进行生效,如果顺序改变就会出现错误。

::v-deep .el-table .el-table__footer-wrapper tbody td:nth-child(3) {
  color: lightgreen;
  font-weight: bolder;
}

::v-deep .el-table .el-table__footer-wrapper tbody td:nth-child(4) {
  color: red;
  font-weight: bolder;
}

2.jsx方式

合计行自定义方法中返回 jsx。

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (column.property === "trade_id") {
          sums[index] = "合计";
        } else if (
          column.property === "trade_power" ||
          column.property === "trade_fee"
        ) {
          const values = data.map((item) => Number(item[column.property]));
          let value = values.reduce((prev, cur) => {
            return Utils.argAdd(Number(prev), Number(cur));
          }, 0);
          // 在这里设置类名
          sums[index] = <span class={"green"}>{value}</span>;
        } else {
          sums[index] = "---";
        }
      });
      return sums;
    },
.green {
    color: lightgreen;
    font-weight: bolder;
}

六.合计行单元格合并

  watch: {
    showTableData: {
      immediate: true,
      handler() {
        setTimeout(() => {
          const tds = document.querySelectorAll(
            ".el-table__footer-wrapper tr>td"
          );
          tds[0].colSpan = 2;
          tds[0].style.textAlign = "center";
          tds[1].style.display = "none";
        }, 0);
      },
    },
  },

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

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

相关文章

十三:java web(5)-- Spring数据持久层

目录 Spring 数据持久层 1. Spring 与 JDBC 1.1 使用 Spring 管理数据库连接 1.1.2 Apache Commons DBCP 基于配置文件xml 使用 1.1.3 Apache Commons DBCP 基于配置类使用 1.1.4 HikariCP 基于配置文件xml 使用 推荐使用 Spring Boot 默认连接池 1.1.5 HikariCP 基于配置…

初学者指南:用例图——开启您的软件工程之旅

目录 背景&#xff1a; 基本组成&#xff1a; 关联&#xff08;Assciation&#xff09;&#xff1a; 包含&#xff08;Include&#xff09;&#xff1a; 扩展&#xff08;Extend&#xff09;&#xff1a; 泛化&#xff08;Inheritance&#xff09;&#xff1a; 完整银行…

基于单片机洗衣机控制器的设计(论文+源码)

1需求分析 在智能洗衣机系统设计中&#xff0c;考虑到洗衣机在实际应用过程中&#xff0c;需要满足用户对于不同衣物清洁、消毒的应用要求&#xff0c;对设计功能进行分析&#xff0c;具体如下&#xff1a; 通过按键实现洗衣机不同工作模式的切换&#xff0c;包括标准模式&am…

qt QFontDialog详解

1、概述 QFontDialog 是 Qt 框架中的一个对话框类&#xff0c;用于选择字体。它提供了一个可视化的界面&#xff0c;允许用户选择所需的字体以及相关的属性&#xff0c;如字体样式、大小、粗细等。用户可以通过对话框中的选项进行选择&#xff0c;并实时预览所选字体的效果。Q…

Python学习从0到1 day27 第三阶段 Spark ③ 数据计算 Ⅱ

目录 一、Filter方法 功能 语法 代码 总结 filter算子 二、distinct方法 功能 语法 代码 总结 distinct算子 三、SortBy方法 功能 语法 代码 总结 sortBy算子 四、数据计算练习 需求&#xff1a; 解答 总结 去重函数&#xff1a; 过滤函数&#xff1a; 转换函数&#xff1a; 排…

今天,智谱「新清影」上线,率先进入有声视频生成时代!还要继续开源宠粉

来&#xff0c;你先把手机音量打开&#xff0c;然后去“听”下面一段视频&#xff1a; 你是不是一脸懵逼&#xff1f;不知道我想表达什么&#xff1f; 视频是AI生成的并不奇怪&#xff0c;但你可能没法相信&#xff0c;这个视频的音效&#xff0c;也是AI生成的。 火车鸣笛 你…

「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件

本篇将带你实现一个自定义评分星级组件&#xff0c;用户可以通过点击星星进行评分&#xff0c;并实时显示评分结果。为了让界面更具吸引力&#xff0c;我们还将添加一只小猫图片作为评分的背景装饰。 关键词 UI互动应用评分系统自定义星级组件状态管理用户交互 一、功能说明 …

pdf转excel;pdf中表格提取

一、问题描述 在工作中或多或少会遇到&#xff1a;需要将某份pdf中的表格数据提取出来&#xff0c;以便能够“修改使用”数据 可将pdf中的表格提取出来&#xff0c;解决办法还有点复杂 尤其涉及“pdf中表格不是标准的单元格”的时候&#xff0c;提取数据到excel不太容易 比…

IT架构管理

目录 总则 IT架构管理目的 明确组织与职责 IT架构管理旨在桥接技术实施与业务需求之间的鸿沟&#xff0c;通过深入理解业务战略和技术能力&#xff0c;推动技术创新以支持业务增长&#xff0c;实现技术投资的最大价值。 设定目标与范围 IT架构管理的首要目的是确立清晰的组织…

小红书图文矩阵的运营策略与引流技巧解析

内容概要 小红书图文矩阵是一种高效的内容运营方式&#xff0c;能够帮助品牌在竞争激烈的环境中脱颖而出。通过构建矩阵账号&#xff0c;品牌可以实现多维度的内容覆盖&#xff0c;创造出丰富而立体的用户体验。为什么要做图文矩阵&#xff1f;首先&#xff0c;这种方式能够提…

python中常见的8种数据结构之一元组

元组&#xff08;tuple&#xff09;是Python中常见的数据结构之一&#xff0c;它是一个有序、不可变的序列。元组使用圆括号来表示&#xff0c;可以包含任意类型的元素&#xff0c;包括数字、字符串、列表等。元组的元素可以通过索引访问&#xff0c;但是不能修改。 下面是一些…

计算机毕业设计Python+大模型动漫推荐系统 动漫视频推荐系统 机器学习 协同过滤推荐算法 bilibili动漫爬虫 数据可视化 数据分析 大数据毕业设计

作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验&#xff0c;被多个学校常年聘为校外企业导师&#xff0c;指导学生毕业设计并参与学生毕业答辩指导&#xff0c;…

【leetcode练习·二叉树】用「分解问题」思维解题 I

本文参考labuladong算法笔记[【强化练习】用「分解问题」思维解题 I | labuladong 的算法笔记] 105. 从前序与中序遍历序列构造二叉树 | 力扣 | LeetCode | 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵…

产品经理晋级-Axure中继器制作美观表格

这里的效果&#xff0c;步骤如下&#xff1a; 点击中继器&#xff0c;输入表格信息&#xff1b;在中继器中创建表格内容&#xff0c;把你想要的效果制作在中继器中&#xff0c;表头有几个表格&#xff0c;这边就对应多少个。 按照视频的过程把中继器双击后-样式中的文本内容&am…

防火墙|WAF|漏洞|网络安全

防火墙|WAF|漏洞|网络安全 防火墙 根据内容分析数据包&#xff1a; 1、源IP和目的IP地址 2、有效负载中的内容。 3、数据包协议&#xff08;例如&#xff0c;连接是否使用 TCP/IP 协议&#xff09;。 4、应用协议&#xff08;HTTP、Telnet、FTP、DNS、SSH 等&#xff09;。 5…

【Linux系统编程】第四十四弹---从TID到线程封装:全面掌握线程管理的核心技巧

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、tid是什么 1.1、理解库 1.2、理解tid 1.3、tid中线程局部存储 2、封装线程 2.1、基本结构 2.2、函数实现 2.3、使用…

医学图像算法之基于Unet的视网膜血管分割

第一步&#xff1a;准备数据 视网膜血管分割数据比较少&#xff0c;但效果好&#xff0c;总共40张 第二步&#xff1a;搭建模型 UNet主要贡献是在U型结构上&#xff0c;该结构可以使它使用更少的训练图片的同时&#xff0c;且分割的准确度也不会差&#xff0c;UNet的网络结构…

ARM死机(HardFault)调试技巧详解(栈回溯,不破坏现场)

目录 Keil调试技巧&#xff1a; 一.不破坏现场连接仿真器与进入debug 二.栈回溯 死机调试示例 J-Link调试方法 示例&#xff1a;空指针异常 不能连接烧录器或者读取内存怎么办&#xff1f; 在日常开发中&#xff0c;经常会遇到单片机卡死机等问题&#xff0c;经常很难定…

nodejs 020: React语法规则 props和state

props和state 在 React 中&#xff0c;props 和 state 是管理数据流的两种核心机制。理解它们之间的区别和用途是构建 React 应用程序的基础。 一、props 和 state的区别 特性propsstate定义方式由父组件传递给子组件的数据组件内部管理的本地数据是否可修改不可变&#xff…

【开源免费】基于SpringBoot+Vue.JS水果购物网站(JAVA毕业设计)

博主说明&#xff1a;本文项目编号 T 065 &#xff0c;文末自助获取源码 \color{red}{T065&#xff0c;文末自助获取源码} T065&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…