【vue】element-ui使用其table组件合并单元格，最后一行的高度样式异常？

【vue】element-ui使用其table组件合并单元格，最后一行的高度样式异常

date相同的，第一个rowspan是总数，其他的要rowspan:0

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7633353
• 你也可以参考下这篇文章：如何在vue和element-ui中的table表格实现编辑
• 除此之外, 这篇博客: vue+element-ui table表格一个单元格中添加多行数据中的 vue+element-ui table表格一个单元格中添加多行数据 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 话不多说,先上效果图,值得借鉴可以接着往下看
  
  项目中有这样的需求,需要把所有数据按组的方式进行划分并打包,如果一个商品一条数据的话就显得太繁琐,用户体验并不好,于是乎就想到上面这种方式进行渲染和操作,有了想法就去找实现方式呗
  直接去翻了elementui组件,竟然没有这种渲染方式,那就只有另辟蹊径了:在table表格一个单元格中使用template自定义内容再添加一个table表格,结果就如上图所示了

  <el-table :data="list" border style="width: 100%">
    <el-table-column prop="groupName" label="柜组" width='120' ></el-table-column>
    <el-table-column prop="address" label="地址"  width='240' ></el-table-column>
    
    <el-table-column label="商品信息">
      <!-- 分行显示 -->
      <template slot-scope="scope">
        <el-table border :data='scope.row.goodsList' >
          <el-table-column prop='name' label="名称"></el-table-column>
          <el-table-column prop='num' label="数量"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    
    <el-table-column prop="goodsCount" label="商品总数" width='140'></el-table-column>
    <el-table-column fixed="right" align="center" width="230" label="操作">
      <el-button  type="primary" size="small">打包</el-button>
      <el-button  type="primary" size="small">打印</el-button>
    </el-table-column>
  </el-table>
  

  list: [
    {
      groupName: '1店',
      address:"上海市浦东新区XXXXXXXX二楼一楼",
      goodsList:[
        {
          name:'青椒鸡蛋炒饭',
          num:'3'
        },
        {
          name:'鱼香肉丝盖浇饭',
          num:'2'
        },
        {
          name:'干锅土豆片盖浇饭',
          num:'5'
        }
      ],
      goodsCount:'10'
    },
    {
      groupName: '2柜',
      address:"上海市浦东新区XXXXXXXX二楼",
      goodsList:[
        {
          name:'青椒鸡蛋炒饭',
          num:'3'
        },
        {
          name:'鱼香肉丝盖浇饭',
          num:'2'
        },
        {
          name:'干锅土豆片盖浇饭',
          num:'5'
        }
      ],
      goodsCount:'10'
    }
  ],
  

  参考链接: https://blog.csdn.net/zhang1339435196/article/details/105749819.