element ui 表格合计项合并

如图所示:

代码:

复制代码
<el-table height="400px" :data="tableData " border
                      style="width: 100%"
                      stripe 
                      show-summary
                      ref="table"
                      id="table">
</el-table>

监听表格

复制代码
watch: {
//监听table这个对象
        tableData: {
            // 立即监听
            immediate: true,
            handler() {
                this.$nextTick(() => {
                    const tds = document.querySelectorAll(
                        "#table .el-table__footer-wrapper tr>td"
                    );
                    // colSpan合并列
                    tds[0].colSpan = 2;
                    tds[0].style.textAlign = "center";
                    tds[1].style.display = "none";
                });
            },
        },
    },

我这里是合并的两项,官方的没有合并。

相关推荐
IT方大同1 分钟前
RT_thread(RTOS实时操作系统)线程的创建与切换
c语言·开发语言·嵌入式硬件
智算菩萨6 分钟前
【OpenGL】6 真实感光照渲染实战:Phong模型、材质系统与PBR基础
开发语言·python·游戏引擎·游戏程序·pygame·材质·opengl
jinanwuhuaguo6 分钟前
OpenClaw深度沟通渠道-全景深度解构
大数据·开发语言·人工智能·openclaw
是翔仔呐7 分钟前
第14章 CAN总线通信全解:底层原理、帧结构与双机CAN通信实战
c语言·开发语言·stm32·单片机·嵌入式硬件·学习·gitee
我是伪码农17 分钟前
14届蓝桥杯
javascript·css·css3
客卿12320 分钟前
用两个栈实现队列
android·java·开发语言
leaves falling20 分钟前
C++模板初阶:让代码“复制粘贴”自动化
开发语言·c++·自动化
java1234_小锋34 分钟前
Java高频面试题:谈谈你对SpringBoot的理解?
java·开发语言·spring boot
2301_8166512234 分钟前
C++模块化设计原则
开发语言·c++·算法
Ulyanov34 分钟前
Python GUI工程化实战:从tkinter/ttk到可复用的现代化组件架构
开发语言·python·架构·gui·tkinter