element-ui中动态切换设置prop无效

最新推荐文章于 2024-07-23 09:27:48 发布
最新推荐文章于 2024-07-23 09:27:48 发布
阅读量1.3k 收藏
点赞数
分类专栏： vue elementui 文章标签： elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cai_niao5623/article/details/125529448
版权 
<el-form-item v-if="activeName === 'phone'">
    <el-input v-model="ruleForm.phoneOrEmail"  placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item  v-if="activeName === 'email'" key="3" prop="phoneOrEmail">
    <el-input v-model="ruleForm.phoneOrEmail" placeholder="请输入联系电话"></el-input>
</el-form-item>

在el-form-item加上v-if的后，发现prop失效，解决方案：加上一个key就行了，原理是dom复用

韭伍後
关注
专栏目录
Element使用方法
qq_45575393的博客
03-13 562
Element使用方法
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品分类）
weixin_48884617的博客
04-17 3324
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品分类）
ElementUI表单校验，动态prop虽然显示红星，但是为什么不好用
最新发布
qq_59968619的博客
07-23 264
总结：在 ifEndDateCode 等于 '1' 的时候，是 endDate ，但是当不是等于 '1' 的时候，要加一个随意值。
【element ui动态prop校验未生效问题】-2022-07-27
weixin_55931914的博客
04-02 1755
【代码】【element ui动态prop校验未生效问题】-2022-07-27。
el-form-item prop属性动态绑定不生效
weixin_45890564的博客
07-30 3265
做项目时表单有一项需要有条件展示是否校验,于是首先就想到prop动态绑定,如下 但是试了好几遍都不生效,最后改成rules动态绑定校验就OK了
el-form动态设置prop失效问题
pxy9000的博客
12-05 520
起因：我有一个dialog组件页面，用于表单的新增与修改。里面有一个密码框，在新增的时候我希望用户输入时能去校验密码规则，但是在修改时我只希望这一项内容只做展示，所以要关闭校验规则，禁止在该项修改密码。问题：当我先点击修改时，进入该组件页面，prop此时为‘’，不做任何校验，但是我关闭后打开新增页面，此时prop没有改变，仍然为‘’，导致新增页面输入密码无法校验。当是新增页面时，我定义prop为‘password’,通过password去校验密码。当是修改页面时，我定义prop为‘’,不做表单校验。
vue element 组件 form深层 :prop 验证失效问题解决
lzfengquan的博客
02-05 1275
因为element要判断prop传递的值是否合法的话, 就只能用 一个obj 一个key 通过key in obj 这样的方式来判断, 而如果我们不把 要循环或者要绑定的某值yyy 放到 :model 的 xxxx中, form-item在mounted的时候 是拿不到外面this的data的, 所以他无法判断 当前传进来的pumplist到底是谁, 也就没有办法使用key in obj.。我们来看一下 我们代码中传输的model是什么就可以了（要匹配或者包含在内）。越看越像js的一个面试题。
详解element-ui设置下拉选择切换必填和非必填
12-10
问题在于，Element-UI的默认行为是在组件初始化时就确定了校验规则，动态切换`rules`对象的`required`属性无效。 为了解决这个问题，我们可以采取以下步骤： 1. **移除动态校验字段的规则**：首先从`rules`对象中...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
总之，解决Vue和Element-UI的`resetFields()`方法重置表单无效问题，关键在于正确设置`ref`和`prop`属性，并在适当的时候对表单数据进行重置和清除验证结果。理解`resetFields()`方法的机制，以及如何在Vuex环境中...
Vue自定义组件使用Element-ui表单校验
qq_42731434的博客
07-17 2457
一般情况下(form中的组件都是element提供的组件)在使用elm的表单校验时我们是这么使用的：// 栗子.vue <template> <el-form :model="formData" :rule="rules" ref="formRef"> <el-form-item prop="inputValue"> <el-input v-model="formData.inputValue"></el-
vue + vue-resource + element-ui项目中遇到的问题总结
ishell1021的博客
03-08 2219
运营智享遇到的问题(前端) vue + vue-resource + element-ui + vue-router + node.js + sass 1. el-table filter tag 使用filter-method处理数据过滤,当该标签下没有数据时标签切换不起作用 解决: 1.用el-table的filter-change方法处理过滤逻辑,而不用el-table-column...
Element form表单使用v-if prop属性失效问题 Cannot read properties of undefined (reading ‘index0f‘)“found in
qq_42950632的博客
12-16 549
Element form表单使用v-if prop属性失效问题 Cannot read properties of undefined (reading 'index0f')"found in
element 当prop动态时失效问题 添加key值即可
weixin_44286765的博客
07-22 464
element 当prop动态时失效问题 添加key值即可
【vue】Vue+Element Form 表单v-if动态切换el-form-item标签prop属性不生效问题：
Bole6666666的博客
04-03 602
在确保 el-form 标签 :model="form" :rules="rules" 属性及绑定值没问题的情况，给需要动态切换的 el-form-item 标签上 加上。)，这样prop即可生效。
element-ui 表单动态添加prop验证 prop显示没有问题但是不触发验证 验证无效
qq_41287158的博客
11-13 1594
直接上代码，试了几个办法都没有行通，下面给出搞定的方式： <el-form-item label="登录密码：" prop="password" :rules=" title === '添加员工' ? [ { required: tr
表单校验失败原因一：＜el-form-item ＞＜el-form-item / ＞没有给prop属性
2301_77265371的博客
07-31 699
错误代码： 失效情况：<el-form-item ><el-form-item / >没有给prop属性修改后的代码： 如果失效原因是缺少prop,经过以上步骤,正常情况能够正常的进行表单校验。如果表单校验仍旧失效，那么很可能是某处单词拼错，比如把【 required 】拼成 require （作者也犯了这个错误ㄒoㄒ ） 再次修改后： 正常校验结果：
关于element UI 使用多级嵌套表格 table的自定义计算不生效问题
channel)海峡的博客
05-08 807
有空再来整理 贴代码 <template> <div class="app-container"> <el-table :data="dataList" style="width: 100%;margin-top:30px;" row-key="title" border default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildre
el-form表单对象内还嵌套对象，绑定的prop规则校验会失效
weixin_42190844的博客
11-25 6112
继续踩坑~。因为受限于后端返回的数据格式，整个表单是个对象，但是里面还会嵌套对象。 而我们在绑定字段时，自然而然是去绑定最里层的字段。 el-form的model是去绑定大的表单对象。 而我这里的表单项则是绑定final_transfer.acc_profit_name。但我这里prop写的是acc_profit_name。对应规则里面的prop。 按官方文档的，如果表单对象不涉及嵌套，这样绑定是没问题的。但如果涉及到了嵌套。我们这里这样绑定prop，即使表单的值改变了，校验也还是会存在。 解决.
解决Vue中Element-UI组件使用常见问题
"关于在Vue项目中使用Element-UI框架时可能遇到的问题及解决方案的文档" Element-UI是基于Vue.js的一个流行前端组件库，提供了丰富的UI组件，如表格、按钮、下拉菜单等，用于快速构建美观的企业级前端应用。在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值