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')
    }
相关推荐
水上冰石10 分钟前
【MuJoCo从入门到精通】第2章 第一个 MuJoCo 仿真
前端·人工智能·算法
xiaomici40 分钟前
Datasphere的数据merge
数据库
码事漫谈1 小时前
比尔·盖茨这次谈的不是模型,是账单
前端·后端
小林ixn1 小时前
从零设计一个博客系统的数据库:表结构、索引与约束的实战思考
数据库·后端·mysql
Yang96111 小时前
一台顶三台:鼎讯DLJ-1在不同故障类型中的模式切换数据复盘
服务器·网络·数据库
潘正翔2 小时前
Memcached构建缓存服务器
运维·服务器·数据库·缓存·云原生·memcached
星栈2 小时前
AI 生成页面全是紫粉渐变?我用 ui-ux-pro-max-skill 重构了整个产品页
前端·weui
NineData2 小时前
NineData 与平凯数据库(TiDB 企业版)完成产品兼容性互认证
数据库·tidb·ninedata·玖章算术·平凯数据库·产品兼容性认证·tidb企业版
咖啡星人k2 小时前
2026 Text-to-SQL:一句话让 AI 写 SQL,自然语言直接查数据库(MonkeyCode 云端实战)
数据库·机器学习·语言模型·自然语言处理
GreatSQL社区2 小时前
少敲一个字母,GreatSQL 对所有查询“已读不回”
数据库·mysql·greatsql