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

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

相关推荐
新缸中之脑7 分钟前
用Nano Banana验证UI设计
ui
yaoxin52112323 分钟前
327. Java Stream API - 实现 joining() 收集器:从简单到进阶
java·开发语言
golang学习记1 小时前
Go 语言中和类型(Sum Types)的创新实现方案
开发语言·golang
linux_cfan1 小时前
2026版 WordPress 视频插件终极选型:知识付费创作者如何低成本打造专业在线课堂?
前端·javascript·音视频·html5
野犬寒鸦1 小时前
Java8 ConcurrentHashMap 深度解析(底层数据结构详解及方法执行流程)
java·开发语言·数据库·后端·学习·算法·哈希算法
兩尛1 小时前
155最小栈/c++
开发语言·c++
百锦再1 小时前
Java IO详解:File、FileInputStream与FileOutputStream
java·开发语言·jvm·spring boot·spring cloud·kafka·maven
Hello.Reader1 小时前
Tauri vs Qt跨平台桌面(与移动)应用选型的“底层逻辑”与落地指南
开发语言·qt·tauri
xyq20241 小时前
R语言连接MySQL数据库的详细指南
开发语言
pas1361 小时前
46-mini-vue 实现编译 template 为 render 函数
前端·javascript·vue.js