vue vant动态添加一行表单数据

实现效果:

 

1.循环数据

 

<van-cell-group class="ml30 mr30  marginBottom" inset v-for="(item,index) in apply.formList" :key="index">
      <van-cell title="商品名称" :value="item.name"/>
      <van-cell title="类目" :value="item.category"/>
      <van-field input-align="right" v-model="item.combined" label="价税合计" placeholder="请输入注册地址" class=" fieldItem"/>
      <van-field input-align="right" v-model="item.tax" label="税额" placeholder="请输入注册电话" class=" fieldItem"/>
      <van-field input-align="right" v-model="item.time" label="开票时间" placeholder="请输入开户银行" class=" fieldItem"/>
      <van-cell title="发票附件" :border="false"></van-cell>
      <div class="m20" style="position:relative">
         <!--图层 -->
        <div @click="handleSend" class="handleSend" v-if="isShow"></div>
        <van-uploader @oversize="onOversize" @delete="deleteImg"
          :max-size="10240 * 1024" :max-count="6" v-model="item.fileList" :after-read="afterRead" accept="image/*"/>
      </div>
</van-cell-group>
<div class="addDedution" @click="addDedution">+添加进项抵扣明细</div>

2.定义数据

apply:{
        address:"",
        checkbox:false,

        // 定义动态添加的数据
        formList:[
          {
            name:"",
            category:"",
            combined:"",
            tax:"",
            time:"",
            fileList:[],
          }
        ]
      },

3.添加表单数据

addDedution(){
      this.apply.formList.push({
        name:"",
        category:"",
        combined:"",
        tax:"",
        time:"",
        fileList:[]
},


版权声明:本文为SmartJunTao原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。