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

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

相关推荐
潜创微科技6 小时前
IT6520:USB‑C 转 MIPI 芯片方案 4K@120Hz 高清显示
c语言·开发语言
言之。7 小时前
【Python】免费的中文 AI 配音方案
开发语言·人工智能·python
天天进步20157 小时前
Python全栈项目:从零手操一个高性能 API 网关
开发语言·python
Java面试题总结7 小时前
java高频面试题(2026最新)
java·开发语言·jvm·数据库·spring·缓存
kyriewen8 小时前
写组件文档写到吐?我用AI自动生成Storybook,同事以后直接抄
前端·javascript·面试
安生生申8 小时前
使用pygame实现2048
开发语言·python·pygame
莞凰8 小时前
昇腾CANN的“传音入密“:hccl仓库探秘
flutter·ui·transformer
五点六六六8 小时前
你敢信这是非Native页面写出来的渐变效果吗🌝(底层原理解析
前端·javascript·面试
hh.h.8 小时前
CANN算子开发入门:从零开始写第一个Ascend C算子
c语言·开发语言·cann·c算子
AI科技星9 小时前
全域数学·第三部·数术几何部·平行网格卷 完整专著目录(含拓扑发展史+学科定位·终稿)
c语言·开发语言·网络·量子计算·agi