要实现的效果:

        

代码实现:

       设置一下表格的: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博客

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部