关于在vue2中实现el-table的表头合并

要实现的效果:

代码实现:

设置一下表格的:header-cell-style="rowClass"

复制代码
 <el-table
        :data="tableDataDetail"
        style="width: 100%"
        height="100%"
        :header-cell-style="rowClass"
      >
        <el-table-column label="考核内容" align="center">
          <el-table-column prop="type" label="" width="100" align="center">
          </el-table-column>
          <el-table-column prop="name" label="" align="center">
          </el-table-column>
        </el-table-column>
</el-table>

methods:{
    rowClass({ row, column,rowIndex,columnIndex}) {
        console.log(row,column,rowIndex,columnIndex);
        if(rowIndex===0 && columnIndex===0) {
          this.$nextTick(()=> {
            if(document.getElementsByClassName(column.id).length!==0) {
              document.getElementsByClassName(column.id)[0].setAttribute('rowSpan',2);
              return false
            }
          })
        }
        if(rowIndex===1 && (columnIndex===0 || columnIndex===1)) {
         return {display:'none'}
        }

      },
}

借鉴文章:elementui 表头合并,两列共用一个表头,header-cell-style设置表头样式_el-table两列公用一个title-CSDN博客

相关推荐
顽疲5 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好38 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴10 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子10 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js