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

这篇具有很好参考价值的文章主要介绍了elementui 表单数据嵌套过深导致校验不了问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题

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

原因

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

解决

只需要将表单对象后的字符串作为 prop 的值即可:文章来源地址https://www.toymoban.com/news/detail-819846.html

<el-form ref="form" :model="form" :rules="rules" label-width="auto">
	<el-form-item prop="extend.soc.fulySoc">
		<el-input v-model="form.extend.soc.fulySoc"></el-input>
	</el-form-item>
	<el-form-item prop="extend.soc.lowSoc">
        <el-input v-model="form.extend.soc.lowSoc"></el-input>
	</el-form-item>
</el-form>

到了这里,关于elementui 表单数据嵌套过深导致校验不了问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • elementUI 表单数据的校验回显在关闭之后没有重置,再次打开表单之后还显示校验信息(重置表单 element-ui的resetFields()方法不生效)

    问题现象: 因为和修改用的同一个vue页面,所以只要点开修改之后,直接点击添加,就会显示校验的提示信息,也就是表单信息没有重置   解决方法: 解决方法一:在关闭弹框的地方或者需要重置的地方调用: 截图实例:  下面是userInfo的具体展现   解决方法二:如果上面

    2024年02月15日
    浏览(42)
  • vue+element,form循环嵌套表单 、动态添加表单、嵌套表单自定义校验规则

    原文发布链接:https://juejin.cn/post/7181752966611730492 需求: 可点击新增,自动添加表单。(这个不难v-for即可) 可自定义方法校验添加的表单内容。(需要掌握element组件的规则,本人没有熟读官网,碰壁好多次才整理出来这篇文章。重要的事说3遍: 看官网看官网看官网 ) 效果

    2024年02月04日
    浏览(55)
  • element ui form表单循环嵌套 及嵌套表单item的校验方法

    html:  js:  详细的大家可以参考:element ui form循环嵌套表单 及嵌套表单的验证方法(校验)_element循环表单_RxnNing的博客-CSDN博客

    2024年02月09日
    浏览(39)
  • elementUI 非表单格式的校验

     在普通表单中对输入框、选择框都有校验案例。 但是在自定义非空中如何进行校验官网并没有说明 关键代码 clearValidate 方法清除校验 使用案例

    2024年02月16日
    浏览(38)
  • 解决ElementUI动态表单校验验证不通过

    这里记录一下,写项目时遇到的一个问题:就是动态渲染的表单项,加验证规则后一直不通过!!! html部分:  js部分: 结果:   可以看到,按照官网的写法动态渲染的表单项是无法进行校验验证的。这里就是无论选中没选中值都校验 不通过。 修改prop、rules 结果:

    2024年02月12日
    浏览(25)
  • vue +element UI form表单校验数组嵌套,数组对象必填校验

    使用element表单时会出现数组对象类型的数据结构并且需要必填校验 这时数组对象的检验方法就为paramJsonListRules 注意的是为了实现校验,在需要校验的el-form-item内通过自己的:rules加入对象的校验方法,例如图中想给参数值加校验则直接在相关el-form-item内加入 :rules=\\\"paramJsonLis

    2024年02月11日
    浏览(51)
  • vue+elementui表单数组对象深层嵌套之自定义验证规则

    需求场景:在Vue+Elementui项目中,需要在表单的循环数组中,对某一深层嵌套的对象属性制定自定义校验规则。

    2024年02月05日
    浏览(41)
  • vue表单验证rules无效,rules动态选择,rules动态校验,rules对象嵌套校验

    一、问题描述 这里由一个动态切换规则校验引发的一些问题,整理了下,如下文所示。 这里有个需求就是,动态切换radio,对input输入框校验,界面如下 在网上找了一圈,用了第一种方法来解决,动态添加验证规则,方法如下 通过if判断platformType是否等于2,然后添加规则,

    2023年04月19日
    浏览(32)
  • Vue - Element el-form 表单对象多层嵌套校验

    针对el-form的数据源是对象嵌套对象,在进行数据绑定和校验时和单层的对象有一点区别, 具体是下面两部分: 数据源: 1、 给 el-form-item 的 prop 设为: prop=\\\"health.height\\\" 。 v-model 设为: v-model=\\\"fromData.health.height\\\" 2、校验规则 rules 对象对应的key设置为数据源内部的值: \\\'health.heig

    2024年02月14日
    浏览(42)
  • 单页面内循环遍历的多个表单做校验(ui框架:elementui + uview)

    界面展示: 用户每次在【物资扫码】成功后,都会在右侧【物资列表】中增加一个如图的结构(分为上中下三部分,上为【物资编号】,中为表格展示的物资基本信息,下为用户需要填写的表单项【本次组盘数】),需要在用户点击【保存】时,校验每一个表单项必填且数量

    2024年02月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包