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

最新推荐文章于 2024-10-14 16:33:38 发布

船长在船上

最新推荐文章于 2024-10-14 16:33:38 发布

阅读量3.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端开发 Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/124375744

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

前端开发

140 篇文章

订阅专栏

本文展示了如何使用Vue.js的`v-for`指令动态创建表单，并结合`van-cell`、`van-field`及`van-uploader`组件实现商品信息录入，包括商品名称、类目、价税合计、税额、开票时间和发票附件上传等功能。同时提供了添加进项抵扣明细的按钮，用于扩展表单内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

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:[]
},