vue+element-ui table表格一个单元格中添加多行数据_weixin_45115895的博客-程序员秘密

技术标签： node.js html5 es6 vue.js javascript

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.

本文链接：https://blog.csdn.net/weixin_45115895/article/details/109310889

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

java 枚举类型enum用法_Java中枚举类型Enum的一种使用方式_薇同学的博客-程序员秘密

枚举类定义如下：public enumStatus {SCUUESS("1", "成功"), FAILED("2", "失败");privateString value;privateString desc;publicString getValue() {returnvalue;}public voidsetValue(String value) {this.value =value;}publ...

EduCoder_web实训作业--JavaScript学习手册七：JS循环语句_凤凰谷佛的博客-程序员秘密

第一关/********** Begin **********/ var sum = 0; var i = 2; while(i <= a) { var j = 2; while(j < i) { if(i%j == 0) {//能被整除，不是质数 break;//不需要再判断 } j ++;//除数加1，继续测试是不是质数

hdu 3874 Necklace(离线+树状数组)_qian99的博客-程序员秘密

题意：给出n个数，有m组询问，每组询问求区间[l,r]中不重复的数的和。思路：感觉最近看到了好几道这种题……这道题还是很简单的，维护一个树状数组（线段树），从左到右把每个数字插入进去，我们用一个pre数组记录某一个数第一次出现的位置，如果要插入的数不是第一次出现，那么就把上一次出现的那个位置的值修改成0，然后再将数插入进去，之后处理以当前位置为终点的区间的询问就行了。代码：

Activity的一些冷僻属性用法-程序员秘密

Activity的一些少见的用法

LaTex如何自动生成参考文献_Vintage TANG的博客-程序员秘密

1、制作.lib文件，内容如下所示：@inproceedings{goodfellow2014generative, title={Generative adversarial nets}, author={Goodfellow, Ian and Pouget-Abadie, Jean and Mirza, Mehdi and Xu, Bing and Warde-Farley, ...

angularjs 用 ajax请求回来数据 ng-model 双向绑定失效问题_js接口返回数据后没有双向绑定怎么办_guo一清的博客-程序员秘密

今天遇到一个问题，就是 angularjs 用 ajax请求回来数据 ng-model 双向绑定失效了，页面没有渲染返回的数据接口数据返回了页面没有渲染解决方法 angularjs 利用ajax请求时候存在的一个bug 加上$scope.$apply(); 就行了...