解决select下拉框设置了多选multiple之后 一进页面就触发校验bug

最新推荐文章于 2024-04-01 11:07:05 发布
最新推荐文章于 2024-04-01 11:07:05 发布
阅读量1.3k 收藏
点赞数
分类专栏： elementui 文章标签： elementui 前端 bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ylpmty/article/details/116055621
版权
本文介绍了在Vue项目中遇到的一个常见问题：当使用Select组件并开启多选(multiple)模式后，页面加载时会意外触发校验。通过在created钩子函数中初始化ruleForm的perdritype属性为空数组，修复了这一bug。这个解决方案对于避免前端表单验证的不必要触发具有指导意义。
摘要由CSDN通过智能技术生成

解决select下拉框设置了多选multiple之后 一进页面就触发校验bug

created() {
    this.$set(this.ruleForm, 'perdritype', [])
  },
耐跪搓衣板
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI中select下拉框设置了多选multiple之后 一进页面就触发校验bug
吴小勇的博客
11-22 2827
封装select组件时，预留了多选的配置，但是配置过后发现，一进入组件后select组件会自动校验，百度了，大概都是说的时选择器输入框在data中的初始值。created钩子函数中，判断当前是否传入multiple参数，如果有传入表示多选，可以将钩子函数中将表单的初始值改为空数组 [ ] ，
element ui select多选组件 重构
05-03
element ui select多选组件 标签根据数据属性显示颜色不同, 至于plugins
element ui中下拉框设置了多选multiple之后 一进页面就触发表单校验
m0_58565372的博客
04-11 1375
注： _self.form对象为上述第一种方法中的form对象。2.使用钩子函数，在创建页面时，重置对应属性的值。1.页面初始化时，设置当前属性初始值为空数组。
解决bug--select下拉框由单选设置了多选multiple之后 一进页面就触发校验
zx990912的博客
01-11 694
控件已经有选中的值，因此不会触发非空校验。只有在用户进行选择后，绑定的数组才会更新，触发表单的校验逻辑。通过设置初始值为空数组解决自动触发表单非空校验的问题。这是因为在表单初始时，select下拉框由单选设置了多选multiple之后 一进页面就触发校验。控件没有选中任何值，而表单的非空校验是基于其绑定的值来进行的。
layui多选下拉框样式，整套layui-select-multiple
12-09
"layui-select-multiple"就是Layui专门为多选下拉框设计的一整套样式和功能。 首先，我们来看“layui多选下拉框样式”这一知识点。Layui的多选下拉框在视觉上非常整洁，其设计遵循了扁平化和简洁化的理念，与现代...
select 下拉框可以多选
03-09
首先，要实现`select`下拉框的多选功能，我们需要在`<select>`标签中添加一个`multiple`属性。这个属性告诉浏览器用户可以选取多个值。下面是一个基本的多选`select`下拉框的HTML结构示例： ```html <select ...
下拉框多选select多选
03-09
在网页设计和开发中，"下拉框多选select多选"是一个常见的功能，它允许用户在下拉菜单中选择多个选项，而不仅仅是一个。在HTML中，`<select>`元素通常用于创建这样的下拉菜单，但默认情况下，`<select>`只支持单选。...
select多选 multiple的使用示例
09-04
本示例主要讲解如何使用`<select>`的`multiple`属性创建一个多选下拉框，并通过JavaScript来处理用户的选择。 首先，`<select>`标签的`multiple`属性是关键，它告诉浏览器该下拉列表支持多选。例如： ```html ...
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-select multiple表单校验问题
askuld的博客
12-20 1342
prop属性、rules校验是否正确，这里注意el-select的rules校验的trigger应该是change。如果以上都没问题，那么还有一个原因就是：嵌套太深，导致form检测不到ruleForm的变化。2、选中下拉数据，不会再次触发校验，导致提示文字一直存在。至此，完美解决el-select复选框表单校验。记录一个el-select复选框表单校验例子。注意rule中验证方式应该是“change”1）添加form表单:rule方式验证。2）给下拉框添加change函数。1、一打开页面就会触发校验。
element-ui 表单校验，失去焦点/框内值改变，校验
最新发布
szzlh123456789的博客
04-01 746
前提：在el-form表单中，框中有值，失去焦点或者框内值改变的时候，校验提示，依旧没有消失el-select校验失效问题。层级太深了，form检测不到addform的变化，这个时候要么change事件里面强制更新dom触发（视图更新）form表单里面，el-select会出现失效的情况，尤其是我这个el-foem-item 里面又嵌套了。奇怪的是，我表单里面有三个el-select，其他两个生效了，只有另外一个没有生效。
vue element-ui select 多选验证不通过问题处理
u012386455的博客
04-21 5181
vue elemnt ui select 多选验证不通过
在vue里面，element ui，el-select表单选中校验失败
qq_40712862的博客
07-28 4856
在vue里面，element ui，el-select表单选中校验失败
vue el-select multiple 下拉多选控件，一打开页面就会触发表单校验问题
梁小茹的博客
06-25 1102
多选的下拉
针对element下拉select可多选时（ multiple）添加校验一进页面就触发校验bug
qq_42859450的博客
08-31 1192
element-plus select触发校验bug
解决iview下拉框Select多选由于内容太多导致的换行
06-08
可以通过设置Select组件的dropdownStyle样式来解决多选内容换行的问题。 具体步骤如下： 1. 打开iview官网的Select组件文档页面，找到dropdownStyle属性。 2. 在该属性中设置maxHeight和overflowY为auto，如下所示： ```html <Select v-model="value" :multiple="true" :options="options" :dropdownStyle="{maxHeight: '200px', overflowY: 'auto'}"></Select> ``` 其中，maxHeight属性设置下拉框的最大高度，overflowY属性设置内容超出下拉框高度时出现滚动条。 3. 根据实际情况调整maxHeight的值，保证下拉框不会太高或太低。如果内容超出下拉框高度时，出现了滚动条，可以通过调整下拉框的宽度或字体大小等方式，使得内容能够全部显示在下拉框中。 以上就是解决iview下拉框Select多选由于内容太多导致的换行的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值