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

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

相关推荐
Zhencode2 分钟前
Vue3核心运行时之runtime-core
前端·javascript·vue.js
月光有害3 分钟前
深入解析批归一化 (Batch Normalization): 稳定并加速深度学习的基石
开发语言·深度学习·batch
yaoxin5211235 分钟前
326. Java Stream API - 实现自定义的 toList() 与 toSet() 收集器
java·开发语言
csdn_life189 分钟前
Qwen3.5-397B-A17B-GGUF(UD-Q4_K_XL)3卡全流程部署文档(基础→API→UI)
ui
Cosmoshhhyyy11 分钟前
《Effective Java》解读第40条:坚持使用Override注解
java·开发语言
lsx20240618 分钟前
HTML 媒体(Media)详解
开发语言
PieroPc19 分钟前
用python 写的 Gitee 数据备份工具
开发语言·python·gitee
sycmancia19 分钟前
C++——类的真正形态、构造函数的调用
开发语言·c++
csbysj202019 分钟前
Bootstrap 多媒体对象
开发语言
桂花很香,旭很美23 分钟前
[7天实战入门Go语言后端] Day 7:综合实战——小型 REST API 与优雅关闭
开发语言·后端·golang