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')
    }
相关推荐
excel35 分钟前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼1 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手5 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法5 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku5 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode5 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu5 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu5 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu5 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu5 小时前
【js篇】call() 与 apply()深度对比
前端·javascript