v-for中动态校验el-form表单项的实践
更新时间：2022年05月29日 10:46:05 作者：水冗水孚
在项目开发中，我们经常会遇到表单保存的功能，本文主要介绍了v-for中动态校验el-form表单项的实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>
问题描述
在项目开发中，我们经常会遇到表单保存的功能，在表单保存前，常常需要做表单必填项的校验，校验通过以后才去发请求保存表单数据。
但是，这个表单如果是动态的，即：可以新增相同的表单。比如这个表单有输入框和下拉框需要校验，点击添加表格按钮，再新增一个相同的表单，同样新的这个表单对应的输入框和下拉框也需要校验。
本文记录一下对应代码写法思路，我们先看一下效果图：
效果图
代码思路
- 表单的主数据是要写成对象形式
:model="ruleForm"不过既然是要动态的，肯定是要循环呢，所以，可以写成这样：
ruleForm: {
// 动态循环项数组
formItemArr: [
{
name: "",
gender: "",
},
],
},- 点击添加表格的时候，就可以直接push对应项就行啦，即，这样：
// 添加一个表格
addForm() {
let itemObj = {
name: "",
gender: "",
};
this.ruleForm.formItemArr.push(itemObj);
},重点来喽，因为是循环的，所以prop也要变成动态的了，要拼接上index，就变成根据索引去找对应的校验项了，即为：
:prop="'formItemArr.' + index + '.name'"，这样的话，就变成了：prop="formItemArr.0.name"、prop="formItemArr.1.name"、prop="formItemArr.2.name"... 这样的话，就可以照顾到每一项中的每一个绑定的值了，校验就不会漏掉校验规则写成内联就可以触发校验函数
this.$refs["ruleForm"].validate((val) => {})了
<el-form-item
label="姓名"
:prop="'formItemArr.' + index + '.name'"
:rules="{
required: true,
message: '请填写',
trigger: 'blur',
}"
>
......完整代码
演示的话，大家直接复制粘贴即可
<template>
<div class="box">
<el-button @click="addForm" size="mini" type="primary" plain
>添加表格</el-button
>
<el-button @click="saveForm" size="mini" type="primary" plain
>保存表格</el-button
>
<br />
<br />
<el-form
:model="ruleForm"
ref="ruleForm"
label-width="100px"
class="formform"
>
<div
class="formformItemClass"
v-for="(item, index) in ruleForm.formItemArr"
:key="index"
>
<el-form-item
label="姓名"
:prop="'formItemArr.' + index + '.name'"
:rules="{
required: true,
message: '请填写',
trigger: 'blur',
}"
>
<el-input
size="mini"
v-model.trim="item.name"
placeholder="请填写"
style="width: 200px"
></el-input>
</el-form-item>
<el-form-item
label="性别"
:prop="'formItemArr.' + index + '.gender'"
:rules="{
required: true,
message: '请选择',
trigger: 'change',
}"
>
<el-select
clearable
size="mini"
v-model="item.gender"
placeholder="请选择"
>
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
// 动态循环项数组
formItemArr: [
{
name: "",
gender: "",
},
],
},
};
},
methods: {
// 添加一个表格
addForm() {
let itemObj = {
name: "",
gender: "",
};
this.ruleForm.formItemArr.push(itemObj);
},
// 保存表格
saveForm() {
this.$refs["ruleForm"].validate((val) => {
if (val) {
console.log("符合要求，保存成功", this.ruleForm);
} else {
console.log("error submit!!");
return false;
}
});
},
},
};
</script>
<style lang="less" scoped>
.box {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 24px;
.formform {
width: 360px;
.formformItemClass {
padding-top: 24px;
border: 2px dashed #ccc;
margin-bottom: 18px;
}
}
}
</style>到此这篇关于v-for中动态校验el-form表单项的实践的文章就介绍到这了,更多相关v-for el-form表单项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Vue响应式原理及双向数据绑定的示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了VUE组件 之 Drawer 抽屉 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要给大家介绍了vue如何使用socket与服务端进行通信的相关资料,在Vue中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下2023-09-09
Vue3新增了Composition API，我们只需将实现某一功能的相关代码全部放进一个函数中，然后return需要对外暴露的对象，这篇文章主要介绍了vue3 Composition API使用,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue组件设计之多列表拖拽交换排序,常见的场景有单列表拖拽排序，多列表拖拽交换排序，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JavaScript 沙箱探索，沙箱是基于 event bus 形式的通信实现上层的功能，文章的例子选择接口实现了 web worker 与 quickjs 的 EventEmitter，,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了vue 解决mintui弹窗弹起来,底部页面滚动bug问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue DatePicker日期选择器时差8小时问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本文主要介绍了VUE 自定义取色器组件的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
actions用来处理mutations中的异步操作,触发mutations中的函数,下面这篇文章主要给大家介绍了关于vuex新手进阶篇之actions的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
最新评论