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

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

相关推荐
Whisper_Sy2 小时前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 网络状态实现
android·java·开发语言·javascript·网络·flutter·php
Bony-2 小时前
Go语言垃圾回收机制详解与图解
开发语言·后端·golang
hmywillstronger2 小时前
【Rhino】【Python】 查询指定字段并cloud标注
开发语言·python
新缸中之脑2 小时前
Weave.js:开源实时白板库
开发语言·javascript·开源
我能坚持多久2 小时前
D16—C语言内功之数据在内存中的存储
c语言·开发语言
Amumu121382 小时前
Vue组件化编程
前端·javascript·vue.js
leo__5203 小时前
C#与三菱PLC串口通信源码实现(基于MC协议)
开发语言·c#
二十雨辰3 小时前
[python]-函数
开发语言·python
码农水水3 小时前
中国邮政Java面试被问:容器镜像的多阶段构建和优化
java·linux·开发语言·数据库·mysql·面试·php
福楠3 小时前
C++ STL | map、multimap
c语言·开发语言·数据结构·c++·算法