iview formItem动态绑定props，实现验证

最新推荐文章于 2023-11-17 15:23:33 发布
最新推荐文章于 2023-11-17 15:23:33 发布
阅读量1.6k 收藏 1
点赞数
文章标签： html5 vue.js elementui 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ys_dd/article/details/119412304
版权

代码如下：

 规则的绑定如下：

在form表单里动态绑定rules，绑定的值ruleValidate如下：

 实现验证代码如下：

 this.$refs[name]中的name就是form表单绑定的ref的值。

杨杨得亿~
关注
react学习笔记 item5 --- Props
诗渊的博客
11-20 3954
本文介绍了 React 中的 props，通过 props，可以向子组件传递参数，利用getDefaultProps可以设置组件的默认 props；为了保证传递参数类型的准备性，可以借助 PropTypes 对 props 的类型进行验证。
createform用法_GitHub - fengzhongye/form-create: 使用ivew动态创建form表单/use iview create form...
weixin_42513365的博客
01-14 890
form-create使用iview动态创建form表单具有数据收集、校验和提交功能的表单生成器，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能。1.1版本重大更新内部重构新增 省市区三级联动组件新增 组件事件扩展优化 文件上传,时间选择等组件待完善动态显示隐藏表单动态增加表单树形控件生成示例安装npm install form-...
iview 动态表单验证prop用法
热门推荐
weixin_42776027的博客
01-30 1万+
prop的写法::prop="'items.' + index + '.name'" var cv_arr = [ { 'name': 'items.0.name', 'method': 'NotNull' } ] 自定义写法
iview的form表单
weixin_45195355的博客
05-16 355
【代码】iview的form表单。
iview formitem 自定义非空校验，和其他校验。根据表单其他字段决定是否非空校验。
qq_27312237的博客
02-01 1937
我遇到的问题：表单中有某字段，要根据别的字段来判断这个字段是否要进行非空校验，其他复杂的校验也同理。 我直接使用的iview的校验：但是会出现某些字段即使填上值也会报为空的错，输入框和选择框已经都做过是string而不是number的处理表单字段也打印出来是有值的，所以排除这两种情况。 原先使用的校验方式： <FormItem label="企业名称" prop="orgName" :rules="[{required: true, message: '不能为空',trigger: 'b
iView中表单(动态)Form的校验
最新发布
k0933的博客
11-17 2484
iview 动态表单校验
vue2.0 iview2.0+ Table 表格自定义封装 动态配置columns 按照顺序展示
愿你走过半生，归来任是少年。
07-18 3514
common-content为最外层的盒子，paging组件一看就是管理分页的组件，把封装好的table-list当作slot插槽 看一下table-list的配置项： isCheckbox 是否显示Checkbox height 表格的高度 columnObject 每一列的数据对象 checkArray 表头的数组 fixedOrder 用来固定顺序的 表头数组 <div class="common-content"> <paging ref="paging.
iview前端向后端传数据一直转圈_记一次开发过程中，iview遇到的一些坑以及解决办法...
weixin_39959482的博客
12-22 813
写在开头：本次项目采用的是vue2.0+iview3.0，最近公司没啥事，来总结一下开发过程中遇到的问题。1、Modal关闭问题需求背景：modal框里面是个form表单，点击确定之后，先验证form表单，验证通过则关闭modal框，验证不成功则提示用户，不关闭。问题描述：本来刚开始想通过modal框v-model绑定的值(true或false)来进行控制，手动改之后，报错。解决办法：官方ivie...
iview踩坑记录（使用iview组件你不得不看的坑点和妙用指南！）
前端彭于晏的博客
07-26 8124
iview踩坑记录 清空iview各种组件的方法 promise.all和Table的@on-select、@on-selection-change结合实现批量删除 利用Modal的on-visible-change事件实现增加和修改 利用select的label-in-value实现两个输入框的绑定 利用select的远程搜索实现输入 select的远程搜索结合实现两个输入框的绑定以及增改 利用Table的render实现图片、替换
基于iview的Upload上传组件支持图片压缩和文档预览，整合七牛云、腾讯云
asynll的博客
11-15 1901
分享一个自己封装的基于iview的Upload组件，支持图片及文档的在线预览，支持图片的压缩上传(仅本地)，同时整合七牛云、腾讯云（不支持压缩），上传文件类型不限，有需要的可以拿去使用，写的不好请勿喷。 组件是一个上传集合所以代码有点多，使用时建议拆分为自己项目需要的那部分。 图片压缩原理：浏览器从本地读取到文件并构造成一个image对象，然后把image对象根据自己需要的大小裁剪为指定宽高（...
vue之props
m0_74433188的博客
04-23 2088
因为在编译时整个表达式都会被移到外部的函数中。一些补充细节：所有 prop 默认都是可选的，除非声明了。
iview form组件，当formItem嵌套使用时，formData会是多层结构的json数据，导致async-validator验证插件失效
关注前端，关注原创
10-30 692
在项目中遇到个多层的json数据渲染到页面中，第一层渲染成卡片，第二层渲染成列表，第三层才真正渲染成input标签的场景。这种多层form数据的场景，无法在form标签中定义:rules变量来实现表单验证。最终实现的效果如图：第一个卡片两条数据之间的验证互不影响，第一个卡片和第二个卡片之间互不影响，而所有卡片都由一个form渲染，这样有利于直接生成一个formData。这段代码要在项目中删了，所以简单记录下，免得后面忘了。
element-ui循环验证表单时prop绑定方式
txw0415的博客
04-14 912
循环绑定 prop 以及 rules验证的相关方式 <div v-for="(item, index) in channelForm.typeList" :key="index"> <div > <el-divider content-position="center"> <span class="title-box">东方财富</sp
iview form 表单的怪异小BUG
weixin_30609331的博客
01-11 267
当同一个弹窗中的表单重复利用时： 我原先的代码逻辑是： 1 <Form :label-width="100" class="mt20" ref="changeParam" :rules="ruleValidate" :model="changeParam"> 2 <Row> 3 <Col span...
iview form表单的一些坑
dtq007的博客
02-28 697
props: { order: { type: Object, required: true, } }, data() { return { formItem: { user: { uname: '', user_id: '', mobile: '', ...
vue中组件通信1(props)
Amelian的博客
11-22 378
一、数据存储部分 即是要解决存什么数据，什么时候读取，当一有对数据相关操作时要更新数据 data中的数据不能写死了，需要从localStorage中读取数据 使用window.localStorage.getItem(‘todos_key’)//但是这里获取到的是文本数据，因此需要得到key-value的形式，将其转换为JSON格式：（因为todos这里是一个JSON格式的数组）-------所以在监视中setItem存储的数据类型要相对应 ‘[ ]‘表示当为空时解析的文本 2…用到深度监视（watc
IView的Form表单自定义验证需注意事项
u012632105的博客
01-07 824
写自定义验证时，除需要Form中的ref、rules、model和FormItem中的prop数据结构的高度对应外，还要注意，在绑定model中的对应prop之前，还需要清理ref中的fields。否则通过validator校验的第二个参数value是不会更新的。 validator写法： { validator: (rule, value, callback)=>{ cons...
element-plus的form表单form-item的prop怎么写才能正确校验，实现逻辑是怎么样的？
qq_33925054的博客
01-05 4446
不管是element-plus还是上一个版本的element-ui，都是一个使用很广泛的基于css+html+js的ui组件库，它的form表单自带强大的校验功能，form-item的prop怎么写才正确，实现逻辑是怎么样的？搞懂了，下次可以不用查阅api反复测试就能写出正确的prop了
itemprops.get( 获取标准商品类目属性 )
02-06 167
通过设置必要的参数，来获取商品后台标准类目属性，以及这些属性里面详细的属性值prop_values。
动态修改iview中表单FormItem中label的颜色
05-25
要动态修改 iview 中表单 FormItem 中 label 的颜色，可以使用以下方法： 1. 在表单项中设置 label 的 slot 属性，如下所示： ``` <FormItem label="Username"> <template slot="label"> <span :style="{ color: labelColor }">Username</span> </template> <Input v-model="username" /> </FormItem> ``` 在这里，我们使用了 label 的 slot 属性，并在 slot 中使用了一个 span 标签来设置 label 的文本内容，并绑定了一个 labelColor 变量作为文本颜色。 2. 在 Vue 实例中定义 labelColor 变量，并在需要时修改该变量的值，如下所示： ``` export default { data() { return { labelColor: 'black', username: '' } }, methods: { changeLabelColor() { this.labelColor = 'red' } } } ``` 在这里，我们在 Vue 实例中定义了 labelColor 变量，并将其初始化为黑色。然后，在需要时，在方法中调用 changeLabelColor() 方法来修改 labelColor 变量的值为红色。 通过这种方式，我们就可以动态修改 iview 中表单 FormItem 中 label 的颜色了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值