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";
                });
            },
        },
    },

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

相关推荐
CoderYanger18 分钟前
C.滑动窗口——1423. 可获得的最大点数
java·开发语言·算法·leetcode·1024程序员节
全栈陈序员21 分钟前
【Python】基础语法入门(九)—— 代码规范、调试技巧与性能初探
开发语言·python·代码规范
合作小小程序员小小店23 分钟前
图书管理系统,基于winform+sql sever,开发语言c#,数据库mysql
开发语言·数据库·sql·microsoft·c#
Yue丶越23 分钟前
【C语言】数据在内存中的存储
c语言·开发语言·网络
FakeOccupational39 分钟前
电路笔记(信号):网线能传多少米?网线信号传输距离
开发语言·笔记·php
李宥小哥1 小时前
Redis10-原理-网络模型
开发语言·网络·php
利刃大大1 小时前
【c++中间件】语音识别SDK && 二次封装
开发语言·c++·中间件·语音识别
T***u3331 小时前
前端框架在性能优化中的实践
javascript·vue.js·前端框架
jingling5552 小时前
vue | 在 Vue 3 项目中集成高德地图(AMap)
前端·javascript·vue.js
同学小张6 小时前
【端侧AI 与 C++】1. llama.cpp源码编译与本地运行
开发语言·c++·aigc·llama·agi·ai-native