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

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

相关推荐
7ioik37 分钟前
什么是线程池?线程池的作用?线程池的四种创建方法?
java·开发语言·spring
寻星探路41 分钟前
JavaSE重点总结后篇
java·开发语言·算法
Charles_go2 小时前
C#中级8、什么是缓存
开发语言·缓存·c#
じòぴé南冸じょうげん2 小时前
若依框架favicon.ico缓存更新问题解决方案:本地生效但线上未更新
前端·javascript·前端框架·html
狮子座的男孩2 小时前
js基础高级:01、数据类型(typeof、instanceof、===的使用)、数据与变量与内存(定义、赋值与内存关系、引用变量赋值、js调函数传参)
前端·javascript·经验分享·数据类型·数据与变量与内存·赋值与内存关系·引用变量赋值
松涛和鸣3 小时前
14、C 语言进阶:函数指针、typedef、二级指针、const 指针
c语言·开发语言·算法·排序算法·学习方法
智商低情商凑7 小时前
Go学习之 - Goroutines和channels
开发语言·学习·golang
半桶水专家7 小时前
Go 语言时间处理(time 包)详解
开发语言·后端·golang
编程点滴7 小时前
Go 重试机制终极指南:基于 go-retry 打造可靠容错系统
开发语言·后端·golang
椒盐螺丝钉7 小时前
Vue Router应用:组件跳转
前端·javascript·vue.js