element-ui table合并列有间隙问题

效果图

html

<div class="eol-table">
      <el-table ref="table" :data="tableData" :span-method="objectSpanMethod"  v-loading="loading" class="table-striped" >
        <el-table-column label="SKU" prop="name" align="center"></el-table-column>
        <el-table-column label="成品规格" prop="age" align="center"></el-table-column>
        <el-table-column label="生产套数" prop="sex" align="center">
          <template slot-scope="scope">
          <el-input   size="small" @input="()=>{}" v-model.number="scope.row.name" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column label="可齐平套数" prop="age" align="center">
          <template slot-scope="scope">
            <el-input   size="small" @input="()=>{}" v-model.number="scope.row.name" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column label="物料编码" width="100" class-name="custom-column" prop="name" align="center">
           <template slot-scope="scope">
            <el-table :data="scope.row.lists" :show-header="false" tooltip-effect="light">
              <el-table-column width="100" align="center">
                <template slot-scope="props">
                  <span>{{props.row.aaa}}</span>
                </template>
              </el-table-column>
              <el-table-column width="100" align="center">
                <template slot-scope="props">
                  <span>{{props.row.bbb}}</span>
                </template>
              </el-table-column>
              <el-table-column width="100"  align="center">
                <template slot-scope="props">
                  <span>{{props.row.ccc}}</span>
                </template>
              </el-table-column>
              <el-table-column width="100" align="center">
                <template slot-scope="props">
                  <span>{{props.row.ddd}}</span>
                </template>
              </el-table-column>
              <el-table-column width="100" class=""  align="center">
                <template slot-scope="props">
                  <el-input style="width:80px"  size="small" disabled  v-model.number="scope.row.name" placeholder=""></el-input>
                </template>
              </el-table-column>
              <el-table-column width="100" align="center">
                <template slot-scope="props">
                  <span>{{props.row.fff}}</span>
                </template>
              </el-table-column>
              <el-table-column width="100" align="center">
                <template slot-scope="props">
                  <el-input style="width:80px"  size="small" disabled  v-model.number="scope.row.name" placeholder=""></el-input>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="物料分组" width="100"  align="center"></el-table-column>
        <el-table-column label="库存数量" width="100" align="center"></el-table-column>
        <el-table-column label="采购在途数量" width="100" align="center">
          
        </el-table-column>
        <el-table-column label="剩余可齐平套数" width="100"  align="center" >
          
        </el-table-column>
        <el-table-column label="单价" width="100"  align="center"></el-table-column>
        <el-table-column label="金额占用(RMB)" width="100"  align="center" ></el-table-column>
        <el-table-column label="额外投入金额(RMB)"  prop="name" align="center" >
          <template slot-scope="scope">
            <el-input  size="small" disabled  v-model.number="scope.row.name" placeholder=""></el-input>
            <span style="cursor:pointer;color: steelblue;marginTop:7px">更多</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

js-data

loading:false,

tableData: [
        {name: 'aaa', age:"1", sex:"a",lists:[
          {aaa:"11",bbb:"22",ccc:"11",ddd:"22",eee:"11",fff:"22",ggg:"333"},
          {aaa:"11",bbb:"22",ccc:"11",ddd:"22",eee:"11",fff:"22",ggg:"333"},
          {aaa:"11",bbb:"22",ccc:"11",ddd:"22",eee:"11",fff:"22",ggg:"333"},
        ]},
        {name: 'bbb', age:"2", sex:"b",lists:[
          {aaa:"11",bbb:"22",ccc:"11",ddd:"22",eee:"11",fff:"22",ggg:"333"},
        ]},
        {name: 'ccc', age:"3", sex:"c",lists:[
          {aaa:"11",bbb:"22",ccc:"11",ddd:"22",eee:"11",fff:"22",ggg:"333"},
          {aaa:"11",bbb:"22",ccc:"11",ddd:"22",eee:"11",fff:"22",ggg:"333"},
        ]},
        {name: 'ddd', age:"4", sex:"d",lists:[]},
      ]

methods

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 4) {
        return [1, 7]  // 一行我要占多少行 
      } else if (columnIndex >= 5 && columnIndex <= 10) { //5到10为所占的行
        return [0, 0]  // 所占的行不显示数据， 如果不反回[0,0]的话， 后面的数据回自动填充进去
      }
    }
    

css

.eol-table /deep/ {
  .custom-column .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  .el-table.table-striped {
    tbody {
      > tr:hover {
        .custom-column {
          tbody {
            tr > td {
              background: #f5f8ff;
            }
          }
        }
      }
    }
    &:before {
      background-color: #ebeef5;
    }
  }
  .el-table {
    &:before {
      background-color: transparent;
    }
    .custom-column {
      padding: 0 !important;
      .el-table__body-wrapper {
        border-left: none;
        border-right: none;
      }
      .cell {
        padding: 0;
        width: 100%;
        height: 100%;

        .el-table,
        .el-table__body-wrapper,
        .el-table__body {
          height: 100%;
        }
        td {
          display: table-cell;
          &:last-child {
            border-right: none;
          }
          .cell {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
          }
        }
        tr:last-child {
          > td {
            border-bottom: 1px solid transparent;
          }
        }
      }
      
    }
  }
}