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

更新时间：2022年05月23日 14:05:31 作者：Shaojun_jita

这篇文章主要介绍了关于表单组件el-form中的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的名字一致，这样才能确保组件的统一性。

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

您可能感兴趣的文章:

Vue3获取响应式数据的四种方法
Vue 3 引入了一个全新的响应式系统,其中最核心的就是 reactive 和 ref,它们是实现响应式数据的基础,用于创建可以自动跟踪变化并更新视图的对象和变量,本文介绍了Vue3获取响应式数据的四种方法,需要的朋友可以参考下
2024-08-08
vue3 自定义指令控制按钮权限的操作代码
这篇文章主要介绍了vue3 自定义指令控制按钮权限,为了提高用户体验，当该按钮无权使用时，使用el-tooltip功能进行提醒，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
vue简单实现购物车结算功能
这篇文章主要为大家详细介绍了vue简单实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
默认浏览器设置及vue自动打开页面的方法
今天小编就为大家分享一篇默认浏览器设置及vue自动打开页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue对象添加属性(key:value)、显示和删除属性方式
这篇文章主要介绍了vue对象添加属性(key:value)、显示和删除属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue 3 使用moment设置显示时间格式的问题及解决方法
在Vue 3中,因为过滤器(filter)已经被废弃,取而代之的是全局方法(global method),本文给大家介绍Vue 3 使用moment设置显示时间格式的问题及解决方法,感兴趣的朋友一起看看吧
2023-12-12
vue之Element-Ui输入框显示与隐藏方式
这篇文章主要介绍了vue之Element-Ui输入框显示与隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vite环境变量.env文件的配置及使用
在Vite中,我们可以使用环境变量来管理不同环境下的配置,本文主要介绍了vite环境变量.env文件的配置及使用,具有一定的参考价值,感兴趣的可以了解一下
2024-06-06
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
本篇文章主要介绍了Vue2 利用 v-model 实现组件props双向绑定的优美解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
vue中注册组件的两种方式详解(全局注册&& 局部注册)
vue 是一个完全支持组件化开发的框架，组件之间可以进行相互的引用，这篇文章主要介绍了vue中注册组件的两种方式详解(全局注册&& 局部注册),需要的朋友可以参考下
2023-06-06