本文已参与「新人创作礼」活动，一起开启掘金创作之路。
实现效果：
项目使用vant-ui，根据项目需要自定义修改
需求： 点击添加按钮，动态添加一行表单数据
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:[]
}
相关文章推荐：
# vue使用vant-ui、天地图、Openlayers实现轨迹查询,点击事件信息弹窗，列表加载刷新，复位功能
# vue使用天地图、openlayers实现多个底图叠加显示
# vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能