vue 动态添加form表单

一、效果图

二、代码块

<template>
	<!-- 动态添加form表单-->
  <div class="hello">
	  <van-nav-bar
	    title="标题"
	    left-text="返回"
	    left-arrow
	    @click-left="onClickLeft"
	  />
	<!-- 动态表单增加 -->
	<div v-for="(item,index) in list" style="width: 94%;margin: 0 auto;">
		<van-row>
		  <van-col span="18" style="text-align: left;color: #006AF1;line-height: 40px;font-size: 16px;">专利申请明细-{{index+1}}</van-col>
		  <van-col span="6" style="text-align: right;line-height: 40px;">
			  <van-icon
			   v-if="list.length > 1"
			   @click="del(index)" 
			   name="delete-o" 
			  />
		  </van-col>
		</van-row>
		<van-form>
			<van-field
			v-model="item.name"
			name="用户名"
			label="用户名"
			placeholder="用户名"
			/>
			<van-field
			  v-model="item.content"
			  is-link
			  readonly
			  clickable
			  name="picker"
			  label="城市"
			  placeholder="点击选择城市"
			  @click="selectCity(index)"
			/>	
			<van-field
			  v-model="item.startDate"
			  is-link
			  readonly
			  name="datetimePicker"
			  label="开始日期"
			  placeholder="点击选择开始日期"
			  @click="dateShow(item,index,'start')"
			  />
			  <van-field
			    v-model="item.endDate"
			    is-link
			    readonly
			    name="datetimePicker"
			    label="结束日期"
			    placeholder="点击选择结束日期"
			    @click="dateShow(item,index,'end')"
			    />
			<van-field
			 v-model="item.remarks"
			 type="textarea"
			 name="备注"
			 label="备注"
			 placeholder="备注"
			 style="display: inline-block;"
			/>
		</van-form>	
	</div>
	<div style="width: 50%;margin: 0 auto;">
		<van-row v-if="list.length < 5">
			<van-col :span="11">
				<van-button round block type="info" size="small" @click="addForm" >新增</van-button>
			</van-col>
			<van-col :span="10" :offset="1">
				<van-button round block @click="save" size="small" type="primary">保存</van-button>
			</van-col>
		</van-row>
		<van-row v-else>
			<van-button round block @click="save" size="small" type="primary">保存</van-button>
		</van-row>
	</div>
<!-- 	<div style="height: 50px;"></div>
	<van-row>
	  <van-col span="24" style="position: fixed;bottom: 0;">
		  <van-button  block @click="save" size="small" type="info">保存</van-button>
	  </van-col>
	</van-row> -->
	
	<!-- 多选 -->
	<van-popup v-model="showPicker" position="bottom">
	  <van-picker
	    v-model="currentDate"
		show-toolbar
		:columns="columns"
		@confirm="onConfirm"
		@cancel="showPicker = false"
	  />
	  </van-picker>
	</van-popup>
	
	<!-- 日期 -->
	<van-popup v-model="dateShowPicker" position="bottom">
		<van-datetime-picker
		  v-model="currentDate1"
		  type="date"
		  title="选择年月日"
		  :min-date="minDate"
		  :max-date="maxDate"
		  @confirm="dateConfirm"
		  @cancel="dateShowPicker = false"
		/>
	</van-popup>
	
  </div>
</template>

<script>
import Toast from 'vant/lib/toast';
export default {
  data () {
    return {
		
	// *****日期*************************
		index:0,
		startOrEnd:'',
		dateShowPicker:false,
		minDate: new Date(2000, 0, 1),
		maxDate: new Date(2100, 11, 31),
		currentDate: new Date(),	//默认当前日期
		currentDate1: new Date(),	//默认当前日期
	// **********************************
		
		msg: 'Welcome to Your Vue.js App',
		list:[{
		  name:'Champion',
		  content:'临汾',
		  remarks:'',
		  startDate:'',
		  endDate:''
		}],
		showPicker: false,
		columns: ['临汾', '长治', '运城','晋城', '吕梁', '忻州','朔州','大同','晋中','阳泉','太原'],
		cityIndex:0,
    }
  },
	methods:{
		// 返回上一级
		onClickLeft(){
			window.history.back()
			// window.history.go(-1)
		},
// *************动态增加form表单************************
		addForm(){
			if(this.list.length <= 5){
				this.list.push({
					name:'',
					content:'',
					remarks:'',
					startDate:this.getTime(new Date()),
					endDate:this.getTime(new Date())
				})				
			}else{}
		},
		// 删除
		del(index){
			this.list.splice(index,1)
		},
		// 选择框显示
		selectCity(index){
			this.cityIndex = index;
			this.showPicker = true
		},
		// 选择框确认
		onConfirm(value) {
		  this.list[this.cityIndex].content = value;
		  this.showPicker = false;
		},
		// 保存,获取form表单的值
		save(){
			this.$message.success(JSON.stringify(this.list));
		},
// ***************日期***********************************************
		dateShow(m,n,k){
			this.index = n;
			this.startOrEnd = k;
			this.dateShowPicker = true
		},
		dateConfirm(val){
			let year = val.getFullYear()
			let month = val.getMonth() + 1
			let day = val.getDate()
			if (month >= 1 && month <= 9) {
				month = `0${month}`
			}
			if (day >= 1 && day <= 9) {
				day = `0${day}`
			}
			if(this.startOrEnd == 'start'){
				this.list[this.index].startDate = year + "-" + month + "-" + day
			}else if(this.startOrEnd == 'end'){
				this.list[this.index].endDate = year + "-" + month + "-" + day
			}
			
			this.dateShowPicker = false;
		},
		
		// 封装公共的方法，获取当前时间；
		getTime(date){
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			if(month < 9) {
				month = '0' + month;
			}
			if(day < 9){
				day = '0' + day;
			}
			var time = year + "-" + month + "-" + day;
			return time;
		}
	},
	created() {
		this.list[0].startDate = this.getTime(new Date());
		this.list[0].endDate = this.getTime(new Date());
	}
}
</script>
<style scoped>
	.hello{
		height: 100vh;
		background-color: rgb(247, 247, 247);
		overflow: auto;
	}
</style>