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

智能推荐

聊聊zero-shot learning 和 one-shot learning-程序员宅基地

文章浏览阅读778次。Palatucci, Mark, et al. "Zero-shot learning with semantic output codes."Advances in ..._one-shot/zero-shot learning:

webSocket入门小案例(搭建实时交互的群聊+点对点的交流)_websocket入门案例-程序员宅基地

文章浏览阅读2.9k次。​WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。​_websocket入门案例

【HDU - 3308】 LCIS 【线段树+单点更新+区间合并】_given n integers. you have two operations: u a b: -程序员宅基地

文章浏览阅读304次。Given n integers. You have two operations: U A B: replace the Ath number by B. (index counting from 0) Q A B: output the length of the longest consecutive increasing subsequence (LCIS) in [a, b]._given n integers. you have two operations: u a b: replace the ath number by

WPF-设置窗体显示在右下角_wpf 窗口显示在右下角-程序员宅基地

文章浏览阅读2.8k次。 private void Button_Click(object sender, RoutedEventArgs e) { Win_Display_Position win = new Win_Display_Position(); //显示在右下角 double xpos = this.Left+this..._wpf 窗口显示在右下角

Mybatis分页查询案例_mybatis 分页查询-程序员宅基地

文章浏览阅读4.9k次,点赞2次,收藏6次。Mybatis分页查询案例_mybatis 分页查询

解决MAC系统升级导致COCOAPODS失效问题-程序员宅基地

文章浏览阅读76次。解决MAC系统升级导致COCOAPODS失效问题使用pod install出现如下错误-bash: /usr/local/bin/pod: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory这是Mac升级系统导致,当你的M..._mac升级10.15系统后cocoapod不能用

随便推点

认识MyBatis与Mybatis-plus及两者的区别_mybatis和mybatisplus的区别-程序员宅基地

文章浏览阅读2.3w次,点赞41次,收藏264次。一、认识Mybatis MyBatis 是持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息,将接口和 Java 的 POJOs(Plain Ordinary Java Object,普通的 Java对象)映射成数据库中的记录。1、功能架构Mybatis的功能架构分为三层_mybatis和mybatisplus的区别

50个最常用的UNIX / Linux命令(示例)_xp24g top-程序员宅基地

文章浏览阅读807次。This article provides practical examples for 50 most frequently used commands in Linux / UNIX.This is not a comprehensive list by any means, but this should give you a jumpstart on some of the com_xp24g top

hybrid app初体验,和react-native一起飞_hybrid能用react吗-程序员宅基地

文章浏览阅读1.7k次。第一次启动了react-native的示例,今天主要把其中遇到的坑与解决的办法分享给大家。如有疏漏、错误还望指正。首先还是要从hybrid app这个概念说起(如果对于这个过程不感兴趣的同学,可以直接往下翻,从开始配置react-native看起)。hybrid app就是混合应用。从我个人的理解,本以为就是在原生的app里面嵌入一些网页(webview),直到最近去体会了一把ionic,以及rea_hybrid能用react吗

1.物联网射频识别,RFID概念、组成、中间件、标准,全球物品编码——EPC码_epc 系统 rfid 实验d-think-程序员宅基地

文章浏览阅读1.7k次。可以配置和监视ISO/IEC 18000-6TypeC中防碰撞算法的时隙帧数、Q参数、发射功率、接收灵敏度、调制速率等,可以控制和监视选择命令、识读过程、会话过程等。读写器本质是射频无线数据采集设备。RFID标签靠近RFID读写器时,读写器会发送无线电波激活标签,标签接收到激活信号后会返回存储在标签内部的信息,读写器接收到信息后可以对其进行处理,如存储、传输或处理数据。但对于多数系统,需要有计算机系统组成的系统高层,对一个或多个读写器采集的标签数据进行整合,从而完成数据的查询、管理和数据交互等功能。_epc 系统 rfid 实验d-think

Import语句基础_import aie 语句-程序员宅基地

文章浏览阅读1.5k次,点赞4次,收藏7次。1 问题在 Java 中,如果给出一个完整的限定名,包括包名、类名,那么 Java 编译器就可以很容易地定位到源代码或者类。import 语句就是用来提供一个合理的路径,使得编译器可以找到某个类。2 方法1.import导入声明可分为两种:1) 单类型导入(single-type-import)例: 2) 按需类型导入(type-import-on-demand)例:2. 举例java.util..._import aie 语句

Java线程池核心线程数与最大线程数的区别_核心线程数和最大线程数-程序员宅基地

文章浏览阅读2.9w次,点赞37次,收藏100次。核心线程corePoolSize:核心线程数;maximunPoolSize:最大线程数每当有新的任务到线程池时,第一步: 先判断线程池中当前线程数量是否达到了corePoolSize,若未达到,则新建线程运行此任务,且任务结束后将该线程保留在线程池中,不做销毁处理,若当前线程数量已达到corePoolSize,则进入下一步;第二步: 判断工作队列(workQueue)是否已满,未满则将新的任务提交到工作队列中,满了则进入下一步;第三步: 判断线程池中的线程数量是否达到了maxumunPoolSi_核心线程数和最大线程数

推荐文章

热门文章

相关标签