uniapp新增一条数据增加一个折叠栏

html 复制代码
//折叠栏
<uni-collapse class='collapse' ref='collapse'>
			<uni-collapse-item v-for="(item, index) in dataForm.beefCattleNums" :key="index" :title="item.fatCalfNum" class='collapse-item' title-border='show' :border='false' @click=toggleItem(dataForm,index)>
        <view class="item">
          <view class="item-content">
            <view class="item">
              <text class="label">年份</text>
              <text class="text ellipsis num">{{item.fatCalfNum}}</text>
            </view>
          </view>
          <view class="item-content">
            <view class="item">
              <view class="label">货币资金(万元)</view>
              <text class="text ellipsis num">{{item.fatCalfNum1}}</text>
            </view>
          </view>
			</uni-collapse-item>
		</uni-collapse>

//新增按钮
<view class="table-footer-box">
      <image class="btn" src="/static/images/production/icon-add-bl.png" mode="" @click="addInventory"></image>
    </view>

//弹窗
<uni-popup ref="inventoryPopup" class="popup-cus">
      <add-bb-subject @addInventoryHandle="addInventoryHandle" @closeInventoryHandle="closeInventoryHandle"></add-bb-subject>
    </uni-popup>
javascript 复制代码
addInventory(){
            this.$refs.inventoryPopup.open()
      },
      addInventoryHandle(data){
        this.$refs.inventoryPopup.close()
        this.dataForm.beefCattleNums.push(Object.assign({}, data))  
      },
      closeInventoryHandle(){
        this.$refs.inventoryPopup.close()
      },

子组件:

html 复制代码
<view class="form-item">
          <view class="form-item-label">年份</view>
          <view class="form-item-content">
            <input v-model="dataForm.fatCalfNum" type="number" class="uni-input uni-input-box" placeholder-class="input-placeholder" confirm-type="done" placeholder="请输入年份" />
          </view>
        </view>
        <view class="form-item">
          <view class="form-item-label">货币资金(万元)</view>
          <view class="form-item-content">
            <input v-model="dataForm.fatCalfNum1" type="number" class="uni-input uni-input-box" placeholder-class="input-placeholder" confirm-type="done" placeholder="请输入货币资金" />
          </view>
        </view>
<view class="footer-box">
        <view class="btn-l-box" @click="cancelHandle">取消</view>
        <view class="btn-r-box" @click="submitHandle">确定</view>
      </view>

async submitHandle() {
      this.$emit('addInventoryHandle',this.dataForm)
    },
    cancelHandle(){
      this.$emit('closeInventoryHandle')
    }
相关推荐
寒山李白30 分钟前
IDEA连接MySQL服务器数据库指南
java·数据库·mysql·intellij-idea·idea·database
亿坊电商3 小时前
PHP后端项目中多环境配置管理:开发、测试、生产的优雅解决方案!
服务器·数据库·php
韩立学长3 小时前
基于Springboot的影视评论网站的设计与实现58py6238(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·spring boot·后端
未来之窗软件服务4 小时前
未来之窗昭和仙君(四十七)开发商品进销存——东方仙盟筑基期
数据库·进销存·仙盟创梦ide·东方仙盟·昭和仙君·东方仙盟架构
IDOlaoluo5 小时前
TinyRDM 1.2.3 Windows版安装教程(附Redis客户端下载及详细步骤)
数据库·redis·缓存
小光学长5 小时前
基于微信小程序的背单词系统x1o5sz72(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
数据库·微信小程序·小程序
美狐美颜sdk5 小时前
跨平台直播美颜sdk集成攻略:Android、iOS与Web的统一方案
android·前端·ios
Airser6 小时前
npm启动Taro框架报错
前端·npm·taro
Anlici6 小时前
连载小说大学生课设 需求&架构
前端·javascript·后端
我命由我123457 小时前
Derby - Derby 服务器(Derby 概述、Derby 服务器下载与启动、Derby 连接数据库与创建数据表、Derby 数据库操作)
java·运维·服务器·数据库·后端·java-ee·后端框架