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

相关推荐
吃饭睡觉打豆豆嘛1 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
Spider_Man1 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
小高0071 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua2 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12042 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy3 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
Bling_Bling_14 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子4 小时前
JS实现丝滑文字滚动
前端·javascript·面试
写不出来就跑路4 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html