elementUI table 表头合并

最新推荐文章于 2025-06-22 19:56:09 发布

dashenanc

最新推荐文章于 2025-06-22 19:56:09 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue html js

本文链接：https://blog.youkuaiyun.com/dashenanc/article/details/108055609

本文介绍在使用Vue结合ElementUI框架时，如何解决表头单元格合并的问题。作者通过自定义header-cell-style方法，在表格样式中设置rowSpan属性，实现了特定表头的合并效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司现在使用vue+elementUI,在使用表格的时候会出现合并单元格的问题，可以通过表格提供的span-method进行单元格合并，但是它只能对表格的数据内容起作用，对表头不起作用（或许是我自己没有深入学习到span-method或者是没有深入了解表格的每个属性、方法），所以在网上找了方法都没有找到横向合并表头的方法，所以自己就用了一个非常笨的方法去合并。
合并前表格内容如下：
在这里插入图片描述

 <el-table :data="tableData" v-loading="loading" stripe :max-height="maxHeight" id="out-table" :span-method="objectSpanMethod">
      <el-table-column label="业务" align="center" rowspan="3">
        <el-table-column prop="businessDepartment" width="100" align="center">
        </el-table-column>
        <el-table-column prop="department" width="120"  align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="累计" align="center">
        <el-table-column width="120" prop="" label="问题" align="center">
        </el-table-column>
        <el-table-column width="120" prop="" label="未到期" align="center">
        </el-table-column>
      </el-table-column>
 </el-table>

现在要求表头字段业务要单独一个单元格，也就是说下面的俩个单元格是没有的，业务字段要单独合并为一整个单元格，实现方法在表格中添加header-cell-style，通过设置表格样式进行单元格合并。
在这里插入图片描述

html代码
<el-table :data="tableData" v-loading="loading" stripe :max-height="maxHeight" id="out-table" :span-method="objectSpanMethod"
:header-cell-style="dois">
      <el-table-column label="业务" align="center" rowspan="3">
        <el-table-column prop="businessDepartment" width="100" align="center">
        </el-table-column>
        <el-table-column prop="department" width="120"  align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="累计" align="center">
        <el-table-column width="120" prop="" label="问题" align="center">
        </el-table-column>
        <el-table-column width="120" prop="" label="未到期" align="center">
        </el-table-column>
      </el-table-column>
 </el-table>
js方法：
dois({
        row,
        column,
        rowIndex,
        columnIndex
      }){
        if(rowIndex === 0){
           if(columnIndex === 0){
             if(document.getElementsByClassName(column.id).length !== 0){
               var _c = document.getElementsByClassName(column.id)
               document.getElementsByClassName(column.id)[0].setAttribute("rowSpan",3)
              console.log(_c[0].getAttribute("rowSpan"))
             }
             return column
           }
        }
        if(rowIndex === 1){
          if(columnIndex === 0 || (columnIndex === 1)){
            return {display:"none"}
          }
        }

      },