关于在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博客

相关推荐
Asort10 分钟前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手13 分钟前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码13 分钟前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码14 分钟前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
小高00717 分钟前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴17 分钟前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong17 分钟前
JavaScript逆向之反制无限debugger陷阱
前端·javascript
skykun18 分钟前
今天你学会JS的类型转换了吗?
javascript
Lotzinfly19 分钟前
8 个经过实战检验的 Promise 奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
小桥风满袖39 分钟前
极简三分钟ES6 - ES9中对象扩展
前端·javascript