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

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

相关推荐
AC赳赳老秦几秒前
CSV大文件处理全流程:数据清洗、去重与格式标准化深度实践
大数据·开发语言·人工智能·python·算法·机器学习·deepseek
2501_930707784 分钟前
如何使用C#代码将 Excel 文件转换为 SVG
开发语言·c#·excel
程序员修心4 分钟前
CSS 盒子模型与布局核心知识点总结
开发语言·前端·javascript
C语言小火车5 分钟前
【C++】从零开始构建C++停车场管理系统:技术详解与实战指南
开发语言·c++·毕业设计·课程设计
亚历山大海8 分钟前
PHP发送outlook(微软)OAuth 2.0企业版邮箱验证码
开发语言·php·outlook
.简.简.单.单.8 分钟前
Design Patterns In Modern C++ 中文版翻译 第九章 装饰器
开发语言·c++·设计模式
Hard but lovely12 分钟前
Linux: posix标准:线程互斥&& 互斥量的原理&&抢票问题
linux·开发语言
IT古董12 分钟前
企业级官网全栈(React·Next.js·Tailwind·Axios·Headless UI·RHF·i18n)实战教程-第五篇:登录态与权限控制
javascript·react.js·ui
好记忆不如烂笔头abc13 分钟前
安装python新版本
开发语言·人工智能·python
jingling55520 分钟前
uni-app 安卓端完美接入卫星地图:解决图层缺失与层级过高难题
android·前端·javascript·uni-app