element中动态切换设置prop无效的解决方案

最新推荐文章于 2024-08-23 17:12:15 发布
最新推荐文章于 2024-08-23 17:12:15 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： 个人日常开发记录 文章标签： vue js html javascript checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34310906/article/details/106922828
版权

问题描述：通过checkbox动态给表单加验证，选中表单项就加上表单验证

 思路：原本是想给el-form-item动态设置prop属性，但是切换之后发现无效，从网上搜寻无果，便想着通过v-if来控制prop的两个属性值，选中时，能验证的展示

 

注意，一定要加上key值，否则v-if渲染时，还是无法加上验证，由于dom复用

皮卡皮卡~啾
关注
专栏目录
Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件 ＜el-table＞ 跨页后已前勾选的行自动消失问题）详细示例解决教程
王佳斌
03-02 5360
vue3 element puls表格跨页全选实现，vue3 element puls表格,后端分页时,实现分页多选功能，element puls跨页多选，element puls 表格跨分页多选及回显的实现示例，表格分页多选功能，vue3 elementPlus设置表格跨页勾选，vue3 Element plus 最新分页跨页全选操作(跨页记住已经勾选)，vue3 element plus table组件跨分页多选及回显，vue3 element plus el-table-column type="se
Element中table使用v-show不生效，使用v-if生效
Only No.1
10-29 5374
今天同事在开发中遇到一个问题，就是使用table中的type控制表格中两列，其中一列显示另一列则隐藏，同时位置有所改变，在切换tab中，发现一个bug就是tab切换到第二次的时候，显示是对的但是位置发生了变化。 当时我感觉频繁操作建议让他改成v-show，结果发现没生效，主要是因为table中的td，diplay:table-cell,权限高于display:none,导致v-show失效。 后面只能改成v-if,考虑到dom操作过程中，无法识别相同dom标签,导致重复使用td,需要对标签添加ke
Element-UI 中 el-table 树形数据 tree-props使用避坑
web15870359587的博客
03-08 5262
element官网提示设置tree-props为{children: 'children',hasChildren: 'hasChildren'}，data数据需要设置children和hasChildren属性，row-key也绑定了数据的唯一值变量id，但是树形结构就是出不来 在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。 设置 Table 的 lazy 属性为 true.
element的tree组件设置默认值不生效问题
y206206的博客
09-09 4617
<template> <el-tree :data="rightlist" node-key="id" show-checkbox :default-checked-keys="defKeys" :props="treeProps" default-expand-all> </el-tree> </template> <script> export default { data() { return { righ
el-form中使用v-model和prop实现动态校验
最新发布
java程序员的蜕变之路
08-23 1099
公式： 动态校验项的v-model的绑定值 = el-form的属性 :model的值 + '.' + :prop属性的值以此反推 :prop属性的值此公式适应与element、element-plus、ant-design-vue组件库的表单校验场景：本文是三种表单校验1.多个变量控制某一项校验2.对于数组for循环，校验每一项3.对于两个不同的字段，分别v-if显示隐藏的校验1. required: true 会有 * ， 但仅是触发最后点击提交按钮时，校验某一项位必填；
iview升级最新版本后 From表单用v-for动态渲染时 绑定的prop 通不过定义的rules规则 老是报空的错误的复现和解决方案
笨鸟不会飞
08-23 2787
iview升级最新版本后 From表单用v-for动态渲染时 绑定的prop 通不过定义的rules规则 老是报空的错误的复现和解决方案前言3.2.2版本的演示3.3.0+版本演示解决方案降版本到3.2.2手动去清空值换成官方的写法来避免该问题 前言 最近在研究iview，由于使用的是最新版本的iview3.4.0+的版本，刚好一个场景是需要动态生成表单的，但是发现动态生成的表单居然无法验证，会出...
elementUI el-table表格树形结构无法展开
qq_42001686的博客
01-31 2486
elementUI el-table表格树形结构无法展开
el-table树形数据不起作用、el-table-column 按数字显示文字、dialog选择框数字变文字、编辑时 是否 选择
qq_43205267的博客
06-20 765
前端 el-table、el-from相关
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
10-15
本文将探讨如何在Vue table中动态添加一列数据，并解决在动态添加后，新列的数据无法通过v-model实时更新的问题，同时也会涉及Vue table的动态锁定和解锁列的功能。 一、动态添加表格列的问题及解决方案 在Vue应用...
vue表单验证rules无效,rules动态选择,rules动态校验,rules对象嵌套校验
热门推荐
mashangzhifu的博客
11-01 2万+
一、问题描述 这里由一个动态切换规则校验引发的一些问题，整理了下，如下文所示。 1.动态绑定规则校验 这里有个需求就是，动态切换radio，对input输入框校验，界面如下 在网上找了一圈，用了第一种方法来解决，动态添加验证规则，方法如下 <el-form-item label="授权密匙(Key)" v-if="form.value.platformType === 2" prop="value.hundredApiKey" :rules="form.value.platfo
vue + vue-resource + element-ui项目中遇到的问题总结
ishell1021的博客
03-08 2223
运营智享遇到的问题(前端) 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 ui动态prop校验未生效问题】-2022-07-27
weixin_55931914的博客
04-02 1758
【代码】【element ui动态prop校验未生效问题】-2022-07-27。
关于ElementUI-Plus中TreeSelect组件不能自定义value的bug
weixin_48975022的博客
03-19 1478
从上图可以发现，该组件只能收集data中默认的value，即我自定义的:props="{value:'name'}"根本就没用，也就是时候以后如果用该组件，并且想收集某一项数据，就只能把data中想收集的数据改成value:'xxx'，不知道大家有没有好的办法。最近在做树形可选组件，用到了el-tree-select组件，但是发现这个组件好像不能自定义value，百思不得其解，希望得到大家解答。
ElementUI表单校验，动态prop虽然显示红星，但是为什么不好用
qq_59968619的博客
07-23 267
总结：在 ifEndDateCode 等于 '1' 的时候，是 endDate ，但是当不是等于 '1' 的时候，要加一个随意值。
vue elementUI组件表单动态验证失效的问题与解决办法
随风丶逆风的博客
10-22 2万+
一、缘由 在项目中，有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。 二、第一次实现与遇到的问题 比如银行卡号根据输入年龄进行判断，如果大于等于18岁才需要填入银行卡号。最先的想法先设置好el-form的rules，然后通过三元表达式赋值prop属性，实现动态验证，示例如下： <template> <el-form ref="ruleForm"...
el-tree树形节点过滤--不生效
2301_76607997的博客
06-01 1791
问题:树节点过滤结果不生效 组件很简单 事件也很简单 我就不多说了 我遇见的问题是因为我还做了 树 X轴 溢出显示滚动条 导致 过滤数据不变化了。解决:我这个是样式导致的 display:block这个。
element 当prop动态时失效问题 添加key值即可
weixin_44286765的博客
08-04 334
element 当prop动态时失效问题 添加key值即可
[随笔-长记性] el-tree一直提示props未定义问题
qq_34414632的博客
01-02 515
return resolve([{ name: '父级' }]);如上一定需要一个静态父级节点，我一开始使用接口获取数据就会一直提示错误，改为如上就正常了。
element:tree:default-expand-all属性无法动态渲染
xiaojie的博客
10-18 1327
element:tree:default-expand-all属性无法动态渲染
Element-UI + Vue 表单验证解决方案
总结来说，使用element-ui + Vue 解决table中包含的表单验证问题，关键在于动态绑定prop和设置相应的验证规则。通过这种方式，我们可以灵活地在表格的每一行中实现复杂的表单验证功能，提高用户体验并确保数据的准确...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值