Vue+ ElementUI中的el-form-item使用v-if导致的问题

已于 2022-04-21 09:18:23 修改
阅读量1.1k 收藏
点赞数 1
文章标签： elementui
于 2020-12-04 16:18:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46631365/article/details/110653808
版权

在这里插入图片描述
在使用v-if对el-form-item进行操作时出现上诉问题,是因为v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值,需要在对使用v-if的el-form-item上添加一个key属性,key的值必须是唯一性的

web_Orisir
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
2. 在Vue组件中使用`el-upload`，设置`before-upload`钩子，调用压缩函数对图片进行预处理。 3. 处理上传成功后的逻辑，如保存文件信息。 通过这种方式，我们可以确保用户上传的图片在前端被适当压缩，从而减少...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在父组件模板中，我们不再使用`v-if`指令来控制子组件`AddEdit.vue`的显示和隐藏，因为频繁切换`v-if`可能导致性能问题。取而代之，我们直接将子组件渲染在页面上，通过`:msg.sync`和`:form`属性将状态和数据传递给...
el-form-item的key
hjin_的博客
09-03 1345
场景 在一个具有不同tab的搜索表单里面，需要根据分校的选择（以及人员的身份：总部的选择全部分校的时候才有规则，其余没有）来判断创建时间的验证规则，分校为全部时创建时间默认一年且有规则，分校为具体分校时创建时间清空且没有规则。有三个页面要使用到这个搜索表单，且有些许不同。 实现 把这个带tab的搜索表单写为组件。 所有的搜索项都写在一起，便于收集信息。根据所选tab的不同来判断该搜索项是否需要展示即可。 <el-form-item v-if="!['1', '4'].includes(cust
vue 用 key 管理可复用的元素
weixin_43151921的博客
05-24 609
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email&...
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法_el-form-item 必填项校验
最新发布
2401_84619245的博客
05-16 674
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
【element-ui】el-form-item使用v-if导致的问题 , 增加Key
qq_14993591的博客
01-12 895
解决：在 el-form-item 中添加一个属性key，key的值是唯一的（一般key和prop写一样的内容即可，因为rules里面的东西不能重复定义，所以肯定是唯一的。问题：v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值。
vue el-form 添加 v-if之后，表单校验不生效问题
gp_911014的博客
05-19 2544
用 element中 的 form 表单校验的时候，因为有些字段是根据特殊条件来设置显示隐藏的，所以用了 v-if 控制显示；但是发现用 v-if 控制的表单元素总是无法被校验。用 v-show 来控制的表单元素在隐藏状态下时，表单也会校验这个字段。【1】使用 v-if：element在对form表单中带有prop属性的子组件进行校验规则绑定时，是在vue声明周期mounted完成的。
element-ui 表单渲染v-if组件，验证报错
热门推荐
ifredom
12-21 2万+
问题描述 使用elementui的form表单组件，如果其中几个表单项使用了v-if进行UI切换，并且默认v-if="false"不可见，切换的元素又是必填项时，那么在验证的时候，就会出现很奇怪的bug。 原因： elementui在对form表单中带有prop属性的子组件进行校验规则绑定时，是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，...
vue el-button v-if disable失效
addBrick_java的博客
07-13 5341
vue el-button v-if disable失效
Vue+ElementUI实现表单动态渲染、可视化配置的方法
08-27
<el-input v-if="item.type === 'input'" v-model="value[item.key]"></el-input> <el-radio-group v-else-if="item.type === 'radio'" v-model="value[item.key]"> <el-radio v-for="(option, index) in item....
管理系统系列--Vue+ElementUI后台管理系统.zip
02-25
例如，使用`<el-table>`实现数据表格，`<el-form>`和`<el-form-item>`进行表单布局，`<el-dialog>`创建对话框，以及`<el-pagination>`实现分页等。此外，还需要了解如何自定义样式和扩展组件。 4. **路由管理**：...
基于 vue + element-ui 的后台管理系统源码.zip
05-25
Element包含了多种常见的UI组件，如`<el-table>`用于展示表格数据，`<el-button>`用于创建各种样式和功能的按钮，`<el-dialog>`用于弹出对话框，`<el-form>`和`<el-form-item>`用于表单的创建和验证，以及通知、提示...
el-form,当表格校验遇上v-if，怎样处理表格校验不生效的问题
weixin_42215833的博客
01-11 2090
1、场景 在实际工作开发中，我们在处理el-form表单校验问题时常会遇到这样一种情况：根据不同的条件，展示不同的el-form-item，这个时候我们就需要考虑表单元素的显示与隐藏。在vue中，控制显示隐藏的有两个指令：v-if和v-show。 【1】两者不同点：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐； 【2】原理：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基
Element UI 表单在el-form-item中使用自定义验证规则
征途人生&梦
05-24 3044
1：官网示例 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"><
element表单组件使用v-if控制item显隐时，表单校验不生效的问题
weixin_51409195的博客
11-08 1271
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"/>此处修改了v-if的条件之后，由显示变隐藏再使其显示，就出现了错误。输入了值以后还是一直提示未输入，尝试修改代码将v-if改成v-show之后突然发现可以了。aaa: [{ required: true, message: "请输入名称", trigger: "blur", }, ],
【vue】element对一行的单个数据进行v-if判断
当白的技术小窝 ( git : https://github.com/canwhite )
06-17 2213
主要是提供了slot-scope来获取当前row对应的值 然后具体在一行中判断某个值的时候，用scope.$index, scope.row来拿 eg： v-if=“scope.row.name != 'xxx” <el-table-column min-width="50%" align="center" label="操作"> <template slot-scope="scope"> <el-button
Vue+Element中的 el-form-item 进行表单验证时 使用 v-if 出现的问题
qq_37330613的博客
09-11 4686
问题描述 使用 Vue + Element 中的 el-form-item 时 用 v-if 处理显示或隐藏 校验规则失效 原因 v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值 解决 在 el-form-item 中添加一个属性 key key值只需要是独一无二即可 ...
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
i_am_a_div的博客
06-30 7617
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
记录：el-form-item中使用v-if导致规则检验不生效的解决办法
qq_39246667的博客
08-24 1426
今天在项目中遇到一个问题，需要v-if渲染的 el-form-item组件使用prop设置规则校验时不生效： 如图，请求链接仅在http协议类型下才有，所以必须使用v-if做条件渲染,但是导致了上述请求链接空时，规则校验未生效。 解决办法，给该el-form-item 设置一个key即可 ...
vue+elementui的el-form+axios的api接口怎么配合使用
04-21
可以先在el-form的submit方法中使用axios发送请求，具体的方法如下： 在template中： ``` <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> ``` 在script中： ``` import axios from 'axios'; export default { data() { return { form: { username: '', password: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { axios.post('/api/login', this.form).then(response => { if (response.data.code === 200) { // 登录成功，跳转到首页 this.$router.push('/home'); } else { this.$message.error('登录失败'); } }); } else { return false; } }); }, resetForm() { this.$refs.form.resetFields(); } } }; ``` 在上述代码中，我们先引入了axios，使用axios发送POST请求到后台的/api/login接口，参数为表单中的form数据。如果接口返回的状态码为200，说明登录成功，此时可以跳转到首页。如果接口返回的状态码不为200，说明登录失败，此时可以给用户提示登录失败信息。 至此，vue和element-ui的form组件与axios的api接口就配合使用成功了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值