关于表单组件el-form中的prop的作用

目录
  • 表单组件el-form中prop的作用
  • el-form-item 设置prop报错

表单组件el-form中prop的作用

prop就是一个表单规则中的一个属性

如图：

表单规则和表单数据其实可以是相同的。

el-form-item 设置prop报错

please transfer a valid prop path to form item!

官方解释：

https://github.com/ElemeFE/element/issues/2327

但是真实的情况是：

<template v-for="(person,index) in Form.List">
    <el-form-item :prop="'List.'+index + '.code'" :key="person.key" :rules="rules">
        <el-input v-model="person.code"></el-input>
    </el-form-item>
    <el-form-item prop="name">
        <el-input v-model="person.name"></el-input>
    </el-form-item>
    <el-button @click="removeDomain(index)" size="small">-</el-button>
</template>

el-form-item 里面的循环prop名字，需要 和form中list的名字一致，这样才能确保组件的统一性。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于element的表单组件整理笔记

    关于element的表单组件整理笔记

    element表单及代码的展示 详细可以看element表单官方网址 结构.功能分析 通过介绍以及源码可以发现,表单是具有收集.校验.提交数据三个功能的. 他的基本结构如下: <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item label="账号" prop="name"> <el-in

  • element中form组件prop嵌套属性的问题解决

    element中form组件prop嵌套属性的问题解决

    目录 Introduction 总结 Introduction 分享今天同事问的一个问题, 下面这段代码会报错,先看代码:重点是el-form-item组件的prop属性 <template> <div id="app"> <el-form label-width="100px" :model="ruleForm" :rules="rules"> <el-form-item v-for

  • element中el-form-item属性prop踩坑

    element中el-form-item属性prop踩坑

    最近负责前后端项目开发,有个需求是实现Djangorestframework(drf)+element实现动态渲染form表单,drf后端提供json,前端从json中获取form表单元素,并且绑定表单验证规则 在el-form-item属性prop上遇到报错或者没绑定到数据,报错如下 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'prop')" elemen

  • bootstrap中的 form表单属性role="form"的作用详解

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性. role的作用是描述一个非标准的tag的实际作用.比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button 比如, <div role="checkbox" aria-checked="c

  • bootstrap中的 form表单属性role="form"的作用详解

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性. role的作用是描述一个非标准的tag的实际作用.比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button 比如, <div role="checkbox" aria-checked="c

  • 关于表单组件el-form中的prop的作用

    关于表单组件el-form中的prop的作用

    目录 表单组件el-form中prop的作用 el-form-item 设置prop报错 表单组件el-form中prop的作用 prop就是一个表单规则中的一个属性 如图: 表单规则和表单数据其实可以是相同的. el-form-item 设置prop报错 please transfer a valid prop path to form item! 官方解释: https://github.com/ElemeFE/element/issues/2327 但是真实的情况是: <template

  • 解决Antd中Form表单的onChange事件中执行setFieldsValue不生效

    目录 Antd中Form表单的onChange事件中执行setFieldsValue不生效 原因是因为 解决方案 antd Design Form setFieldsValue的使用 解决 结束语 Antd中Form表单的onChange事件中执行setFieldsValue不生效 如果在Form表单中onChange事件中,手写了一个setFieldsValue, 则不会生效. 原因是因为 Form表单会在手写的onChange事件之后执行内部的setFieldsValue,所以会将我们之前手

  • Android实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法(使用起来确实很爽),这时需要自己动手封装一些表单,同时我们还要保持方法可以继续是使用. 组件的源码    https://github.com/haozhaohang/ant-design-expand-component 下面看一下如何自己封装表单组件,这是一个最基础的表单使用例子: impor

  • vue2实现封装动态表单组件

    目录 封装组件注意点 动态表单动态控制的是什么? 动态表单封装 风格一 风格二 (推荐优先采用此风格) 封装组件注意点 不要为了封装而封装 只封装不变的部分,将变化的部分通过slot或其他方式,暴露出去,交给调用者实现 为了提供封装组件的复用率,优先封装为UI组件,而不是封装为业务组件(即:封装组件内部使用到的数据,都通过prop获取,而不是直接通过ajax请求或vuex中获取) 动态表单动态控制的是什么? 已知的需要动态控制的场景: 在A界面显示:A, B, C三个表单项,B界面显示:A,B,

  • js 提交form表单和设置form表单请求路径的实现方法

    如下所示: form表单ID:postform 设置表单请求url document.postform.action = "SaveReturnInfo"; 提交form表单 document.getElementById("postform").submit(); 以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了,希望大家多多支持我们~

  • Jquery Easyui表单组件Form使用详解（30）

    Jquery Easyui表单组件Form使用详解（30）

    本文实例为大家分享了Jquery Easyui表单组件的实现代码,供大家参考,具体内容如下 加载方式 表单组件只能在 JS 区域设置,首先定义一张表单. <form id="box" method="post"> <div> <label for="name">Name:</label> <input class="easyui-validatebox" type=&quo

  • vue表单验证你真的会了吗？vue表单验证（form）validate

    前言 很久没有写文章了,学习了一下webpack,基础的一些组件,今天带来form表单验证组件(element.iviewui)的一期教程(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(github进来的 github 技术文档技术文档会持续更新 效果图 1.原理解释 考虑 我们看一下我们可以用form去整体触发校验也可以单个input来触发form-item 进行校验 童鞋们现在可能感觉还是没懂,没关系继续往下看. 2.派发和广播 为什么要用广播

  • 详解基于原生JS验证表单组件xy-form

    原生form表单 form 表单元素大家可能都用到过,除了可以提交表单外,还有一些内置的表单校验,比如 require . minlength . maxlength ,还有各种类型的 input ,比如 type=email 可以校验是否是邮箱类型,如果不满足还可以使用 pattern 进行正则校验. 原生的表单验证大概如下 虽然丑陋,功能却很强大,基本可以满足一般的需求,不过ui终究过于原生,而且也不方便自定义,所以很多情况下这种默认的表单验证并不使用. 下面来看看 xy-form 下的效果

随机推荐