在Vue中使用Element UI的el-form
组件进行多层数组的表单验证时,可以通过使用v-for
循环渲染表单项,并在el-form-item
上使用:prop
属性来指定需要验证的数据路径。
以下是一个简单的例子,演示如何对嵌套数组进行表单验证:
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item
v-for="(item, index) in form.items"
:key="index"
:prop="'items.' + index + '.name'"
:label="'Item ' + (index + 1)"
>
<el-input v-model="item.name"></el-input>
</el-form-item>
<el-button type="primary" @click="validateForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
items: [
{ name: '' },
{ name: '' }
]
},
rules: {
'items.*.name': [
{ required: true, message: '请输入项目名称', trigger: 'blur' }
]
}
};
},
methods: {
validateForm() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('验证成功');
} else {
alert('验证失败');
return false;
}
});
}
}
};
</script>
在这个例子中,form
对象包含一个items
数组,items
数组中的每个对象都有一个name
属性。rules
对象中定义了一个规则'items.*.name'
,它指定了需要验证items
数组中每个对象的name
属性。
当用户点击提交按钮时,会触发validateForm
方法,该方法会执行表单验证。如果验证通过,则可以执行后续操作;如果验证失败,则会停止后续操作并显示错误信息。