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

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

相关推荐
故事不长丨4 小时前
C#定时器与延时操作的使用
开发语言·c#·.net·线程·定时器·winform
1024肥宅4 小时前
JavaScript 拷贝全解析:从浅拷贝到深拷贝的完整指南
前端·javascript·ecmascript 6
hefaxiang4 小时前
C语言常见概念(下)
c语言·开发语言
欧阳天风4 小时前
js实现鼠标横向滚动
开发语言·前端·javascript
yue0085 小时前
C# Directory的用法介绍
开发语言·c#
局i5 小时前
Vue 指令详解:v-for、v-if、v-show 与 {{}} 的妙用
前端·javascript·vue.js
雨落秋垣5 小时前
手搓 Java 的用户行为跟踪系统
java·开发语言·linq
꒰ঌ小武໒꒱6 小时前
RuoYi-Vue 前端环境搭建与部署完整教程
前端·javascript·vue.js·nginx
爱丽_6 小时前
深入理解 Java Socket 编程与线程池:从阻塞 I/O 到高并发处理
java·开发语言
多敲代码防脱发7 小时前
为何引入Spring-cloud以及远程调用(RestTemplate)
java·开发语言