vue-element-ui table表格中遍历集合数组中的集合元素 ,并且实现列合并_vue table遍历取出里面的数组合并成新的数组-程序员宅基地

        <el-table
          size="small"
          :data="invoice"
          :span-method="arraySpanMethod"
          style="width: 100%"
          height="490">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="date"
            label="合同编号"
            width="150">
            <template slot-scope="scope">
              <el-input size="mini"  v-model=scope.row.contractCode></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="上传合同扫描件"
            width="150">
            <template slot-scope="scope">
              <!-- #409EFF -->
              <div style="background: #409EFF;text-align: center;color:white;border-radius: 5px;font-size: 13px;"><p>请上传对应和同</p><p>的发票扫描件</p></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="province"
            label="发票类型"
            width="150">
            <template slot-scope="scope">
              <div v-for="(item, index) in invoice[scope.$index].invoices" :key="index">
                <el-input size="mini" style="margin-top: 0px;width: 130px"  v-model=scope.row.title></el-input>
                <el-input size="mini" style="margin-top: 0px;width: 100px"  v-model=scope.row.title></el-input>
                <el-input size="mini" style="margin-top: 0px;width: 100px"  v-model=scope.row.title></el-input>
                <el-input size="mini" style="margin-top: 0px;width: 100px"  v-model=scope.row.title></el-input>
                <el-input size="mini" style="margin-top: 0px;width: 120px"  v-model=scope.row.title></el-input>
                <p style="display:inline-block;margin-left: 20px;margin-top: 3px;width:70px;height:20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">融资扫描件啊</p>
                <p style="display:inline-block;margin-left: 30px;width:40px;height:30px;overflow: hidden;">
                  <img src="../../assets/images/step_27.jpg">
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="city"
            label="发票代码"
            width="120">
          </el-table-column>
          <el-table-column
            prop="province"
            label="发票号码"
            width="100">
          </el-table-column>
          <el-table-column
            prop="province"
            label="发票金额"
            width="100">
          </el-table-column>
          <el-table-column
            prop="province"
            label="发票日期"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="发票扫描件"
            width="100">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="操作"
            width="100">
          </el-table-column>
        </el-table>

获取当前数组的下标使用 

scope.$index :获取当前行的下标
scope.row:获取当前行的对象              然后使用v-for遍历,

v-for="(item, index) in invoice[scope.$index].invoices"

合并列

     //合并列
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 3) {
            return [1, 7];
          }else if (columnIndex === 9){
            return [1,1];
          }
      }

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspancolspan的对象。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qphelloworld/article/details/99979684

智能推荐

QGIS:利用等高线生成dem_qgis等高线生成dem-程序员宅基地

文章浏览阅读3.4k次。QGIS:利用等高线生成dem打开QGIS,首先导入等高线的线文件,确保属性表里有高程这项数据,笔者导入的是云浮的等高线,源文件分成了5个图层,关键字段均是elev。将等高线合并到一个图层,步骤为矢量-数据管理工具-合并矢量图层,选择合并的图层即可,英文版的朋友自行翻译(等高线只有一个图层的小伙伴可以跳过这步)。 合并后的图层 放大后是这样的合并完成后,进行矢量转栅格操作,这步是核心,栅格-转换-矢量栅格化(矢量转栅格),然后把必要的信息填上,记得选择的关键字_qgis等高线生成dem

windbg调试命令_windbg exe模块-程序员宅基地

文章浏览阅读1.1k次。#调试命令窗口 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++#使用gflags.exe工具(在windbg所在目录下),让某个进程启动时,拉取windbg进行调试如下截图:当名称为captcomm.exe的进程启动时,拉起windbg调试也可通过脚本命令来实现:// 运行c_windbg exe模块

基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计(1)首页_小程序校园购物平台页面-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏17次。效果图wxml代码<!--轮播:远程数据(图片地址+连接地址)【对象数组,数组中的每个元素包含图片地址+链接地址】--><view ><!--swiper属性里面的设置相比上面,多了个if判断是否显示,jieguo=true; jieguo2=false--><!--远程数据地址:http://phpshop.yaoyiwangluo.com/wx_lunbo.php--><swiper indicator-dots="{{indicato_小程序校园购物平台页面

Java分布式锁_java 分布式锁-程序员宅基地

文章浏览阅读3.3k次,点赞7次,收藏30次。1.什么是锁?在单进程的系统中,当存在多个线程可以同时改变某个变量(可变共享变量)时,就需要对变量或代码块做同步,使其在修改这种变量时能够线性执行消除并发修改变量。而同步的本质是通过锁来实现的。为了实现多个线程在一个时刻同一个代码块只能有一个线程可执行,那么需要在某个地方做个标记,这个标记必须每个线程都能看到,当标记不存在时可以设置该标记,其余后续线程发现已经有标记了则等待拥有标记的线程结束同步代码块取消标记后再去尝试设置标记。这个标记可以理解为锁。不同地方实现锁的方式也不一样,只要能满足所有线程都_java 分布式锁

进制之间的相互转换(超详细)_进制转换-程序员宅基地

本篇文章介绍了十进制与其他进制之间的相互转换方法,包括十进制转换为二进制、八进制、十六进制,以及其他进制转换为十进制的方法。同时还提供了一些具体的转换示例。

课后习题1-数据结构_简述逻辑结构的四种基本关系并画出它们的关系图-程序员宅基地

文章浏览阅读4k次,点赞11次,收藏26次。1.概念:数据:Data,是客观事物的符号表示,是所有能输入到计算机中并被计算机程序处理的符号的总称。数据元素:Data Element,是数据的基本单位,在计算机中常作为一个整体进行考虑和处理,用于完整的描述一个对象。数据项:Data Item,是组成数据元素的、有独立含义的、不可分割的最小单位。数据对象:Data Object,是性质相同的数据元素的集合,是数据的一个子集。数据结构:Data Structure,是相互之间存在一种或多种特定关系的数据元素的集合。逻辑结构:从具体问题抽象出来的_简述逻辑结构的四种基本关系并画出它们的关系图

随便推点

SQL语句左连接LEFT OUTER JOIN的作用_left outer join 的效果-程序员宅基地

文章浏览阅读7.8k次。SQL在联表查询的时候,如果遇到字表的数据是没有的,如果是普通的查询就会出现一种查不到数据的情况,这时候就需要用到联表查询的使用左连接指向主表(左右连接看功能的具体需求),我的情况是主表连接多个子表(这些表是查询下拉框的数据),因为总有用户会不选上某一个的下拉框的情况,这样就会在修改时绑定数据的时候就会出现数据绑不上的情况我们就可以使用左连接,然后就可以查询到有的数据,就不会受到没有的数..._left outer join 的效果

linux分段内存管理中的GDT,LDT,GDTR,LDTR-程序员宅基地

文章浏览阅读2.9k次,点赞8次,收藏17次。本文是对上一篇文章《逻辑地址、线性地址、物理地址的关系以及段寄存器在不同位数CPU中的用途演变以及GDT LDT PGD PT的关系》的补充。一. 寻址方式:实地址模式和保护地址模式我们知道,内存寻址模式在早期是采用的实地址模式(intel 80286之前),后面发展到了保护模式(80286开始)。在8086的时候,也就是16位cpu的时候,CPU配备了4个16位段寄存器(CS代码段寄存器..._ldtr

JSP中的EL表达式报错org.apache.jasper.JasperException_org.apache.jasper.jasperexception: 在 [31] 行处理 [/re-程序员宅基地

文章浏览阅读1.9k次。1、报错场景:在jsp中使用el表达式时,出现JasperException异常。2、报错信息:org.apache.jasper.JasperException: 在 [45] 行处理 [/register.jsp] 时发生异常42: <td style="width:40%">43: <input type="text" clas..._org.apache.jasper.jasperexception: 在 [31] 行处理 [/register1.jsp] 时发生异

H5(html5)入门教程_html5教程-程序员宅基地

文章浏览阅读9.9k次,点赞14次,收藏94次。html零基础01_html5教程

layui--layer.open参数传递问题_layer.open data-程序员宅基地

文章浏览阅读2.1w次,点赞5次,收藏6次。1、第一种方式/**function layer_show(title,url,data,w,h){if (title == null || title == ‘’) {title=false;};if (url == null || url == ‘’) {url=“404.html”;};if (w == null || w == ‘’) {w=800;};if (h ..._layer.open data

华为实习面试(二)_华为实习业务主管面试-程序员宅基地

文章浏览阅读2.1w次,点赞9次,收藏7次。这是来自一位学长的 (业务主管综合面)4.29下午2:10分,全程20min学长的视角:主管也是真的很nice!我每次回答问题后都给我说谢谢,搞得我都不好意思了,整个过程非常随和,完全没有架子,很耐心的给我解释问题,最后退出还说非常感谢面试华为,体验超好,面完五分钟官网刷新通过,十分钟短信通过。总结一下吧,总的来说,我这次华子的面试准备了很多东西,但是基本没问…整个过程体验非常好,不会让你尴尬的,面试官都大赞!给大家分享面筋,希望对还没面试的小伙伴提供参考,不过目前进了池子,得等很久才能出结果,许愿offe_华为实习业务主管面试

推荐文章

热门文章

相关标签