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

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

相关推荐
techdashen42 分钟前
Rust 社区在 4 月做了什么:项目管理月报解读
开发语言·rust·mfc
十五年专注C++开发44 分钟前
QFluentKit: 一个基于 Qt Widgets 的 Fluent Design 风格 UI 组件库
开发语言·c++·qt·ui·qfluentkit
咪饭只吃一小碗44 分钟前
从变量提升到 V8 预编译,彻底搞懂 JS 执行机制
javascript
lly2024061 小时前
PHP JSON 使用指南
开发语言
农夫三拳有点疼=-=1 小时前
vue3实现输入框标签和文本交互
javascript·vue.js·交互
沐知全栈开发1 小时前
jQuery 尺寸
开发语言
ZC跨境爬虫1 小时前
跟着MDN学HTML_day_47:(Document接口)
前端·javascript·ui·html·ecmascript·音视频
Byte Wizard1 小时前
C语言指针深入浅出5
c语言·开发语言
csbysj20201 小时前
Vue.js 监听属性
开发语言