Vue3 ElementPlus-table组件(合计)合并列

news/2024/4/27 8:12:40

 在使用ElementPlus的table组件的时候,我们通常会处理合计,当遇到合计行需要合并列的时候,可以这样做。

 核心就是获取标签,对标签的CSS样式进行设置,以达到合并单元格的效果。

Template

		<el-tablemax-height="calc(100vh - 240px)"ref="tableRef"border:data="tableData"show-summary:span-method="spanMethod":header-cell-style="{ color: '#333', backgroundColor: '#f5f7fa', textAlign: 'center' }"style="width: 100%"align="center">

Script 

import { ref, nextTick } from "vue";
const table = ref();
const spanMethod = ({ row, column, rowIndex, columnIndex }: any) => {nextTick(() => {if (tableRef.value.$el) {let current = tableRef.value.$el.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer");let cell = current.rows[0].cells;cell[0].style.textAlign = "center"; // 合计行第一列字段居中显示。cell[1].style.display = "none";cell[0].colSpan = "2"; // 合并单元格}});
};

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

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

相关文章

浏览器与服务器通信过程(HTTP协议)

目录 1 概念 2 常见的 web 服务器有 3 浏览器与服务器通信过程 3.1 DNS 3.2 URL 4 HTTP请求方法和应答状态码 4.1 HTTP请求报文段实例 4.2 HTTP请求方法 5 HTTP应答报头和应答状态 5.1 HTTP的应答报头结构 5.2 HTTP的应答状态 1 概念 浏览器与 web 服务器在应用层通…

开源大数据集群部署(十五)Zookeeper集群部署

作者&#xff1a;櫰木 1、集群规划 主机版本角色系统用户hd1.dtstack.com3.7.1followerzookeeperhd2.dtstack.com3.7.1leaderzookeeperhd3.dtstack.com3.7.1followerzookeeper 2、zookeeper kerberos主体创建 在生产中zk服务端和客户端票据可以设置成不通名称或相同名称&am…

华为数通方向HCIP-DataCom H12-821题库(多选题:161-180)

第161题 以下关于IPv6优势的描述,正确的是哪些项? A、底层自身携带安全特性 B、加入了对自动配置地址的支持,能够无状态自动配置地址 C、路由表相比IPv4会更大,寻址更加精确 D、头部格式灵活,具有多个扩展头 【参考答案】ABD 【答案解析】 第162题 在OSPF视图下使用Filt…

web的部署

首先&#xff0c;我们鼠标右击此电脑&#xff0c;管理&#xff0c;添加角色和功能 默认下一步&#xff0c; 默认下一步&#xff0c; 默认下一步&#xff0c; 勾选web&#xff0c;点击下一步&#xff0c; 点击下一步&#xff0c; 默认下一步&#xff0c; 勾选所需功能&#xff0…

宠物小精灵之收服

题目描述 宠物小精灵是一部讲述小智和他的搭档皮卡丘一起冒险的故事。 一天&#xff0c;小智和皮卡丘来到了小精灵狩猎场&#xff0c;里面有很多珍贵的野生宠物小精灵。小智也想收服其中的一些小精灵。然而&#xff0c;野生的小精灵并不那么容易被收服。对于每一个野生小精灵而…

【机器学习300问】30、准确率的局限性在哪里?

一、什么是准确率&#xff1f; 在解答这个问题之前&#xff0c;我们首先得先回顾一下准确率的定义&#xff0c;准确率是机器学习分类问题中一个很直观的指标&#xff0c;它告诉我们模型正确预测的比例&#xff0c;即 还是用我最喜欢的方式&#xff0c;举例子来解释一下&#xf…