一、在Vue 中使用表单的双向绑定,提交按钮获取表单数据示例
1.vue 视图
<template>
<div>
<h3>行内表单</h3>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="审批人">
<el-input v-model="formInline.user" placehoder="请输入审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formInline.region" placeholer="活动区域">
<el-option label="上海" value="shanghai"></el-option>
<el-option label="北京" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
2.js代码
export default {
data() {
return {
formInline: {}
};
},
methods: {
onSubmit() {
//打印表单数据
console.info(this.formInline);
}
}
};
3.打印获取的表单数据
二、表单提交前验证处理,动态增加表单项处理
<template>
<el-form :model="dynamicForm" ref="dynamicForm" label-width="100px" class="demo-form">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{required:true,message:'请输入邮箱地址'},
{type:'email',message:'邮箱格式不真确'}
]"
>
<el-input v-model="dynamicForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain,index) in dynamicForm.domains"
:label="'域名'+index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="[
{required:true,message:'域名不能空',trigger:'blur'}
]"
>
<el-input v-model="domain.value"></el-input>
<el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="resetForm('dynamicForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
js代码示例:
export default {
data() {
return {
dynamicForm: {
domains: [{ value: "" }],
email: ""
}
};
},
methods: {
//提交
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert(JSON.stringify(this.dynamicForm));
} else {
return false;
}
});
},
//重置
resetForm(formName) {
this.$refs[formName].resetFields();
},
//增加域名项
addDomain() {
this.dynamicForm.domains.push({
value: "",
key: Date.now()
});
},
//删除域名项
removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item);
if (index != -1) {
this.dynamicForm.domains.splice(index, 1);
}
}
}
};
更多: