elementui 表单数据嵌套过深导致校验不了问题解决

问题

在使用 elementui 表单校验的过程中发现表单中存在嵌套多个层级的数据不能进行校验。

原因

elementui 中如果需要进行表单校验,表单项的 prop 和 v-model 绑定的属性值命名必须要是相同的。而对于多层级的嵌套属性我们应该怎么表示呢?

解决

只需要将表单对象后的字符串作为 prop 的值即可:

<el-form ref="form" :model="form" :rules="rules" label-width="auto">
	<
### Element Plus 中实现表单数据校验Element Plus 中,对于复杂结构的表单(如嵌套对象),可以通过自定义验证规则来实现表单数据校验。这不仅限于简单的字符串或数值类型的输入框,还包括数组、对象等形式更为复杂的字段。 #### 定义表单模型与初始值 为了处理层次的对象结构,在初始化 `data` 属性时应构建相应的层次关系: ```javascript const formData = reactive({ user: { name: '', address: { city: '', street: '' } }, }); ``` #### 设置验证规则 针对上述多层次的数据结构,可以在 `rules` 配置项里为每一层设定具体的验证条件。特别是当遇到像地址这样的子级项目时,需指明完整的路径以便框架能够准确定位到待检验的部分[^1]。 ```javascript const rules = ref({ 'user.name': [ { required: true, message: '请输入用户名', trigger: 'blur' } ], 'user.address.city': [ { required: true, message: '请选择城市', trigger: 'change' } ], 'user.address.street': [ { required: true, message: '请填写街道名称', trigger: 'blur' } ] }) ``` #### 表单模板编写 在 HTML 模板部分,则要确保每一个 `<el-form-item>` 的 `prop` 值能正确反映其对应的完整键路径,这样才能让验证逻辑生效并显示恰当的信息给用户查看。 ```html <el-form :model="formData" :rules="rules"> <!-- 用户名 --> <el-form-item label="用户名" prop="user.name"> <el-input v-model="formData.user.name"></el-input> </el-form-item> <!-- 地址信息 --> <div style="margin-left: 20px;"> <span>地址:</span><br/> <!-- 城市选择器 --> <el-form-item label="" prop="user.address.city"> <el-select v-model="formData.user.address.city" placeholder="请选择城市"> <el-option label="北京" value="beijing"></el-option> <el-option label="上海" value="shanghai"></el-option> </el-select> </el-form-item> <!-- 街道输入框 --> <el-form-item label="" prop="user.address.street"> <el-input v-model="formData.user.address.street" placeholder="请输入街道"></el-input> </el-form-item> </div> </el-form> ``` 通过这种方式,即使面对较为复杂的表单设计也能轻松应对,并且保持良好的用户体验和严格的输入控制。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值