admin管理员组文章数量:1611531
效果图:
1.此设计是针对表单每栏的标题位置不同时的简单解决方案;
2.同时该设计也对校验及重置操作进行详解;
template:
<el-form
ref="ruleForm1"
label-position="left"
label-width="80px"
:rules="rules"
:model="formLabelAlign"
>
<el-form-item label="名称" prop="name">
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
</el-form>
<el-form
ref="ruleForm2"
label-position="top"
label-width="80px"
:rules="rules"
:model="formLabelAlign"
>
<el-form-item label="活动区域" prop="region">
<el-input v-model="formLabelAlign.region"></el-input>
</el-form-item>
<el-form-item label="活动形式" prop="type">
<el-input v-model="formLabelAlign.type"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
data:
formLabelAlign: {
name: "",
region: "",
type: "",
},
rules: {
name: [{ required: true, message: "请输入", trigger: "blur" }],
region: [{ required: true, message: "请输入", trigger: "blur" }],
type: [{ required: true, message: "请选择", trigger: "change" }],
},
methods:
submitForm() {
Promise.all([
this.$refs["ruleForm1"].validate(),
this.$refs["ruleForm2"].validate(),
])
.then(() => {
// 正常操作
alert("submit!");
})
.catch(() => {
// 错误操作
console.log("error submit!!");
return false;
});
},
resetForm() {
this.$refs['ruleForm1'].resetFields();
this.$refs['ruleForm2'].resetFields();
},
如有疑问,欢迎讨论。
版权声明:本文标题:element-ui实现多表单绑定单个值并进行提交与重置操作(label-position不一) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728604586a1165290.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论