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

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

相关推荐
2301_794461576 分钟前
JavaScript 基础知识点详解
前端·javascript·html
施棠海11 分钟前
设计稿一键变成可运行的Android页面:Pixel2XML全流程UI开发框架实战(附完整源码)
android·ui·架构
geats人山人海21 分钟前
c# 第九章 record
开发语言·c#
早期的虫儿有鸟吃23 分钟前
vue2--Vuex 模块化
开发语言·前端·javascript
浪客川1 小时前
Android的SystemUI的启动流程简析
android·开发语言
Cobyte1 小时前
使用 JavaScript 实现有限状态机的经典问题
前端·javascript·vue.js
-银雾鸢尾-1 小时前
C#中的抽象类与抽象方法
开发语言·c#
acheding1 小时前
File System Access API 实战:让网页真正读写本地文件
前端·javascript·vue.js·编辑器·markdown
何时梦醒1 小时前
⚛️ React 19 + TypeScript 深度学习笔记 —— 从组件化思维到 WebGPU 端侧 AI 落地
前端·javascript·人工智能
萧瑟余晖1 小时前
JDK 20 新特性详解
java·开发语言