表头合并及里面的数据合并样式

// 1.template里面的代码
<div class="table-box">       
          <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#DCDFE6" class="tabtop13" align="center">
            <tr>
              <td width="5%" class="btbg font-center titfont" rowspan="2">序号</td>
              <td width="8%" class="btbg font-center titfont" rowspan="2">企业名称</td>
              <td width="6%" class="btbg font-center titfont" rowspan="2">业务状态</td>
              <td width="8%" class="btbg font-center titfont" rowspan="2">企业分类</td>
              <td width="8%" class="btbg font-center titfont" rowspan="2">所在地区</td>
              <td width="10%" class="btbg font-center titfont" rowspan="2">估算在装（立方米）</td>
              <td colspan="4" class="btbg font-center titfont">在装催化剂</td>
              <td colspan="2" class="btbg font-center titfont">下年度预测</td>   
              <td width="8%" class="btbg font-center titfont" rowspan="2">备注</td>          
            </tr>
            <tr>
              <td width="8%" class="btbg font-center titfont">催化剂型式</td>
              <td width="8%" class="btbg font-center titfont" >总体积（立方米）</td>
              <td width="8%" class="btbg font-center titfont">折算净料（吨）</td>
              <td width="8%" class="btbg font-center titfont">更新日期</td>
              <td width="10%" class="btbg font-center titfont">废催处置（立方米）</td>
              <td width="8%" class="btbg font-center titfont">折算净料（吨）</td>              
            </tr>         
            <tbody v-for="(item,i) in my.tableMain" :key="i">              
              <tr class="trData">
                <td :rowspan="item.arr.length">{{item.arr.length}}</td>
                <td :rowspan="item.arr.length">{{item.company}}</td>
                <td :rowspan="item.arr.length">意向</td>
                <td :rowspan="item.arr.length">火电 > 燃煤火电</td>
                <td :rowspan="item.arr.length">内蒙古 > 包头市</td>
                <td :rowspan="item.arr.length">2100</td>  
                <!-- 再装总体积  -->
                  <!-- 催化剂型式 -->
                  <td>{{item.arr[0].name}}</td> 
                  <!-- 总体积（立方米） -->
                  <td>{{item.one}}</td> 
                  <!-- 折算净料（吨） -->
                  <td>{{fnName(item.arr[0].name)}}</td>  
                   <!--更新日期  -->
                  <td>2021-08-01</td>
                <!-- 下年度 -->
                   <!-- 废催处置（立方米） -->
                  <td>2</td>  
                  <!--折算净料（吨）  -->
                  <td>{{fnName(item.arr[0].name)}}</td>
                  <td :rowspan="item.arr.length">暂无</td>        
              </tr>
              <tr class="trData" v-if="item.arr.length>=2">
                  <td >{{item.arr[1].name}}</td>
                  <!-- 总体积（立方米） -->
                  <td>111</td>
                  <!-- 折算净料（吨） -->
                  <td>{{fnName(item.arr[1].name)}}</td>
                  <!-- 更新日期 -->
                  <td>2021-08-10</td>
                  <!-- 废催处置（立方米） -->
                  <td>1</td>
                  <!-- 折算净料（吨） -->
                  <td>{{fnName(item.arr[1].name)}}</td>
              </tr>
              <tr class="trData" v-if="item.arr.length>=3">
                  <td>{{item.arr[2].name}}</td>
                  <!-- 总体积（立方米） -->
                  <td>111</td>
                  <!-- 折算净料（吨） -->
                  <td>111</td>
                  <!-- 更新日期 -->
                  <td>2021-8-11</td>
                  <!-- 废催处置（立方米） -->
                  <td>1</td>
                  <!-- 折算净料（吨） -->
                  <td>2</td>
              </tr>
            </tbody>
          </table>
      </div>
      
   //2. js里面的代码
    const my = reactive({
       tableTop:[],
       key:'',
       option:[],
       tableMain:[
             {company:'1',arr:[{name:'1'},{name:'2'}],},
            {company:'2',arr:[{name:'1'}]},
            {company:'3',arr:[{name:'1'},{name:'2'},{name:'2'}]}
       ],// 主要数据
    })
    
  //3. css样式
   .btbg{
      background: rgb(238, 241, 246) !important;;
      color: rgb(96, 98, 102) !important;
    }   
    .tabtop13 {
      margin-top: 13px;
    }
    .tabtop13 td{
      background-color:#ffffff;
      height:38px;
      line-height:38px;
    }
    .font-center{ 
      text-align:center
    }    
    .titfont { 
      font-size: 15px;
      font-weight: bold;
      color: #909399;    
      background-color:#e9faff;
    } 
    .table-box{
      margin:15px;
      .trData{
        td{
          font-size: 14px;
          color: #909399;
          text-align: center;   
        }
      }
    }