vue element 表格合并名称相同的行 element合并表头

最近项目有一个需求需要做一个疫情防控的表格表头比较复杂在查看Element文档和搜索相关资料后

实现了部分功能

代码如下

<div class="TableShows">
      <!-- :span-method="arraySpanMethod" -->
    <el-table :header-cell-style="getRowClass" :data="tableData" style="width: 100%"  :cell-style="rowStyle">
    <!-- 这里是第一行要包裹其它的column项-->
    <el-table-column width="200" :render-header="getLabel" align="center">
                  <!-- 日期 -->
      <el-table-column prop="deptName" label="街道" width="90" align="center">
        <template slot-scope="scope">
           <el-button style="margin:0 5px;" type="text" @click="getClicktree(scope.row)">{{scope.row.deptName}}</el-button>    
        </template>     
     </el-table-column>
      <!-- 总数 -->
      <el-table-column  prop="allTotal" label="总数">
      </el-table-column>
      <!-- 第一类 -->
       <el-table-column label="现有严格居家监测人数" align="center">
        <el-table-column prop="viewTotal" label="总数" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="来自中高风险地区" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="来自低风险地区" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="密接人员" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="境外人员" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="确诊或无症状人员" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="隔离点工作人员" width="" align="center"> </el-table-column>
        <el-table-column prop="date" label="其他" width="" align="center"> </el-table-column>
      </el-table-column> 
      <!-- 第二类 -->
       <el-table-column width="" label="现有居家健康监测人数" align="center">
        <el-table-column prop="viewTotal" label="总数" width="" align="center"> </el-table-column>
        <el-table-column prop="viewZGFXDQ" label="来自低风险地区" width="" align="center"> </el-table-column>
        <el-table-column prop="viewDFXDQ" label="来自中高风险地区" width="" align="center"> </el-table-column>
        <el-table-column prop="viewMJRY" label="高风险岗位工作人员" width="" align="center"> </el-table-column>
      </el-table-column> 
      <!-- 第三类 -->
      <el-table-column label="现有健康监测人数" align="center">
        <el-table-column prop="lowTotal" label="总数" width="" align="center"> </el-table-column>
        <el-table-column prop="lowZGFXDQ" label="来自低风险地区" width="" align="center"> </el-table-column>
        <el-table-column prop="lowGLDGZRY" label="隔离点工作人员" width="" align="center"> </el-table-column>
        <el-table-column prop="lowJWRY" label="境外人员" width="" align="center"> </el-table-column>
        <el-table-column prop="lowJWTZRY" label="境外同住人员" width="" align="center"> </el-table-column>
        <el-table-column prop="lowCMJCZ" label="次密接触者" width="" align="center"> </el-table-column>
        <el-table-column prop="lowOther" label="其他" width="" align="center"> </el-table-column>
     </el-table-column> 
      <!-- 核酸监测列 -->
       <el-table-column   prop="fromTest1" label="已完成一次核酸监测" width="" align="center"> </el-table-column>
       <el-table-column   prop="fromTest2" label="已完成二次核酸监测" width="" align="center"> </el-table-column>
       <el-table-column   prop="fromTest3" label="已完成三次核酸监测" width="" align="center"> </el-table-column>
       <el-table-column   prop="fromTest4" label="已完成四次核酸监测" width="" align="center"> </el-table-column>
       <el-table-column  fixed="right" prop="fromTest5" label="已完成五次核酸监测" width="" align="center"> </el-table-column>
    </el-table-column>
    </el-table>

最后产品说表头是动态的需要后端返回 前端我就改成了

前端暂时定义的数据格式

有一个问题就是最外面的column使用了 fixed 的话会导致数据的显示问题 在网上查找资料了说需要修改element 的源代码 ,我审查了一下元素应该宽度不够 默认给了一个.is-hidden 这个样式 去掉之后就可以显示了 后来由于产品需求变更 最上面的表头要加上

后来干脆就把最上面的拿出来 单独写一行

最后看下整体效果

端午节的时候后端把接口提供出来了 来看下后端返回的是什么数据格式吧

任务排期重 端午节在家加了一天半的班 把数据处理一下 试了很多办法

最后处理成这种格式

这个是动态的title数据格式

时间紧急 代码质量比较差 就不上代码了 效果算是实现出来了 要是后端可以返回前端需要的数据格式

可以减少前端的工作量