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

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

相关推荐
北极无雪23 分钟前
Spring源码学习(拓展篇):SpringMVC中的异常处理
java·开发语言·数据库·学习·spring·servlet
猿小猴子34 分钟前
Python3 爬虫 中间人爬虫
开发语言·爬虫·python
lly20240641 分钟前
Swift 方法
开发语言
YONG823_API1 小时前
电商平台数据批量获取自动抓取的实现方法分享(API)
java·大数据·开发语言·数据库·爬虫·网络爬虫
寂柒1 小时前
C++——模拟实现stack和queue
开发语言·c++·算法·list
蜜桃小阿雯2 小时前
JAVA开源项目 旅游管理系统 计算机毕业设计
java·开发语言·jvm·spring cloud·开源·intellij-idea·旅游
Benaso2 小时前
Rust 快速入门(一)
开发语言·后端·rust
wjs20242 小时前
HTML5 新元素
开发语言
慕明翰2 小时前
Springboot集成JSP报 404
java·开发语言·spring boot
satan–02 小时前
R语言的基本语句及基本规则
开发语言·windows·r语言