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.