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

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

相关推荐
Wang's Blog3 分钟前
Lua: 基于协程的生产者-消费者模型实现
开发语言·lua
w139548564226 分钟前
Flutter跨平台开发鸿蒙化JS-Dart通信桥接组件使用指南
javascript·flutter·harmonyos
jamesge201014 分钟前
限流之漏桶算法
java·开发语言·算法
Dargon28817 分钟前
Simulink的SIL软件在环测试
开发语言·matlab·simulink·mbd软件开发
Hilaku21 分钟前
当 Gemini 3 能写出完美 CSS 时,前端工程师剩下的核心竞争力是什么?
前端·javascript·ai编程
csbysj202027 分钟前
SVG 椭圆详解
开发语言
oioihoii42 分钟前
C++数据竞争与无锁编程
java·开发语言·c++
DigitalOcean43 分钟前
加速 JavaScript 开发:DigitalOcean 应用托管现已原生支持 Bun
javascript
资生算法程序员_畅想家_剑魔43 分钟前
Java常见技术分享-16-多线程安全-并发编程的核心问题
java·开发语言
We....43 分钟前
Java SPI 机制
java·开发语言