应用场景:
在form表单内,动态生成一个数组类型的一组数据,要求对生成的每一组数据内容进行表单验证。例如动态添加人员,并对每个人的人员的信息输入框进行表单验证。
解决思路:
把rules的验证规则循环写在element ui的el-form-item的标签上,动态绑定prop的值,使用index生成不同的prop来进行动态绑定。每次添加一个人员的时候,就是增加一个对象push到数组内,进行循环表单验证。
代码实现:
<div v-for="(data, index) in formData.dataArray" :key="index">
<el-form-item class="custom-price" :prop="'dataArray.' + index + '.name'" :rules="rules.name">
<el-input v-model="data.name"></el-input>
</el-form-item>
</div>
import { reactive, toRefs } from 'vue';
const state = reactive({
formData:{
dataArray:[]
},
rules:{
name: [{
required: true, message: '此项目为必填项', trigger: 'change'
}],
}
})
const { formData, rules } = toRefs(state);