当前位置: 首页 > article >正文

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


http://www.kler.cn/news/365471.html

相关文章:

  • transforms的使用
  • 隨筆 20241025 Kafka数据一致性的韭菜比喻
  • [RK3566-Android11] 使用SPI方式点LED灯带-JE2815/WS2812,实现呼吸/渐变/随音量变化等效果
  • 威胁 Windows 和 Linux 系统的新型跨平台勒索软件:Cicada3301
  • 【数据结构初阶】二叉树---堆
  • 证件照电子版怎么弄?不花钱制作方法快来学
  • 无人机之低空管控技术
  • 论文阅读-Causality Guided Disentanglement for Cross-PlatformHate Speech Detection
  • ctfshow-web入门-web172
  • WPF中StaticResource和DynamicResource
  • Spring Cloud --- Sentinel 流控规则
  • 2024年项目管理新风向:敏捷开发与瀑布开发,哪个更优?
  • [项目][boost搜索引擎#3] Searcher模块 | 单例设计 | 去重 | 构建json
  • 新手直播方案
  • Linux-Centos操作系统备份及还原(整机镜像制作与还原)--再生龙
  • 《深度学习》Dlib库 CNN卷积神经网络 人脸识别
  • 线性代数学习
  • 散列表:常见的散列冲突解决方法有哪些?
  • LeetCode Hot 100:二分查找
  • layui编辑table数据
  • 人工智能技术的应用前景及对生活和工作方式的影响
  • C++面向对象编程学习
  • Unity3D学习FPS游戏(4)重力模拟和角色跳跃
  • 论文阅读:华为的LiMAC
  • win10怎么卸载软件干净?电脑彻底删除软件的方法介绍,一键清理卸载残留!
  • 批量修改YOLO格式的标注类别