【1.0版本】vue+element UI动态添加表单
图片源码(可复制往后翻):data中定义:methods中:console.log(this.receiverForm.object)在控制台打印出的就是你填写提交的数据可复制源码:<el-col :span="2"><div style="text-align:right;">接收人</div></el-col><el-col :span="
·
这篇小编写的有点潦草,这里有2.0版本的详细讲解
图片源码(可复制往后翻):
data中定义:
methods中:
console.log(this.receiverForm.object)
在控制台打印出的就是你填写提交的数据
对你有帮助请留下你的足迹
可复制源码:
<el-col :span="2">
<div style="text-align:right;">接收人</div>
</el-col>
<el-col :span="3">
<el-form-item prop="worksite_receiver">
<el-input type="text" v-model="worksiteForm.worksite_receiver" placeholder="" @focus="receiverVisible = true" clearable></el-input>
</el-form-item>
</el-col>
<!-- 接收人弹出框 -->
<el-dialog title="添加接收人信息" :visible.sync="receiverVisible">
<el-form :model="receiverForm" :inline="true" ref="receiverFormRef">
<el-row :gutter="10" v-for="(item,index) in receiverForm.object" :key="index">
<el-col :span="2">
<div style="text-align:right;">姓名</div>
</el-col>
<el-col :span="5">
<el-form-item :prop="'object.' + index + '.name'" :rules="[{ trigger:'blur',message:'不能为空(必填项)',required:true }]">
<el-input type="text" v-model="item.name" placeholder="请输入接收人姓名" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<div style="text-align:right;">手机号</div>
</el-col>
<el-col :span="5">
<el-form-item :prop="'object.' + index + '.phone'" :rules="[{ trigger:'blur',message:'不能为空(必填项)',required:true },{trigger:'change',min:11,max:11,messgae:'请输入有效的11位手机号'}]">
<el-input type="phone" v-model="item.phone" placeholder="有效的11位手机号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<div style="text-align:right;">邮箱</div>
</el-col>
<el-col :span="6">
<el-form-item :prop="'object.' + index + '.email'" :rules="[{ trigger:'blur',message:'不能为空(必填项)',required:true }]">
<el-input type="email" v-model="item.email" placeholder="有效的邮箱地址" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="1">
<div style="text-align:right;">
<el-button type="text" plain circle v-if="receiverForm.object.length > 1" @click="removeRow(index)"><span style="color:red;">删</span></el-button>
</div>
</el-col>
<el-col :span="1"></el-col>
</el-row>
</el-form>
<el-row :gutter="10">
<el-col :span="12">
<div>
<el-button type="text" @click="addRow()" class="el-icon-user" circle>添加更多接收人</el-button>
</div>
</el-col>
<el-col :span="12">
<div style="text-align:right;">
<el-button type="primary" plain round @click="allSubmit('object')">提交</el-button>
</div>
</el-col>
</el-row>
</el-dialog>
<-- data中定义 -->
data(){
return (){
receiverVisible:false, //接收人弹出框
receiverForm:{}, //接收人员表单
receiverForm:{
object:[{
name:'',
phone:'',
email:''
}],
},
<-- methods中 -->
//接收人弹框事件
//移除当前行接收人
removeRow(index){
this.receiverForm.object.splice(index,1)
},
//添加接收人信息行
addRow(){
this.receiverForm.object.push({
name:'',
phone:'',
email:'',
})
},
//提交所有接收人信息
allSubmit(receiverFormRef){
this.$refs.receiverFormRef.validate(valid => {
console.log(this.receiverForm.object)
if(valid) {
alert('submit')
}else{
this.$message.warning('啊哈哈哈')
}
})
},
}
作者参考:
解决疑惑
更多推荐
已为社区贡献9条内容
所有评论(0)