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')
    }
相关推荐
GzlAndy10 分钟前
MySQL全局优化
数据库·mysql
m0_7415747513 分钟前
mysql主从同步
数据库·mysql
小白教程1 小时前
MySQL数据库的安全性防护
数据库·mysql
Lion Long1 小时前
CodeBuddy 中国版 Cursor 实战:Redis+MySQL双引擎驱动〈王者荣耀〉战区排行榜
数据库·redis·mysql·缓存·腾讯云·codebuddy首席试玩官·codebuddy
apcipot_rain4 小时前
【应用密码学】实验五 公钥密码2——ECC
前端·数据库·python
ShallowLin4 小时前
vue3学习——组合式 API:生命周期钩子
前端·javascript·vue.js
Nejosi_念旧5 小时前
Vue API 、element-plus自动导入插件
前端·javascript·vue.js
互联网搬砖老肖5 小时前
Web 架构之攻击应急方案
前端·架构
pixle05 小时前
Vue3 Echarts 3D饼图(3D环形图)实现讲解附带源码
前端·3d·echarts
不法5 小时前
uniapp 百家云直播插件打包失败
uni-app·插件使用