ElementUI select设置多选(multiple) 后自动触发formItem校验

最新推荐文章于 2023-08-17 17:17:24 发布
最新推荐文章于 2023-08-17 17:17:24 发布
阅读量2.5k 收藏 1
点赞数 2
分类专栏： Vue篇 文章标签： ElementUI select multiple 触发formItem验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alecor/article/details/107616656
版权

解决方法：

在Vue生命周期created函数中重置一下触发的参数

  created() {
    // 解决select设置多选(multiple) 触发formItem校验
    this.$set(this.sqlData, 'table', [])
  },

原因：等有空了在分析；

Alecor
关注
专栏目录
针对element下拉select可多选时（ multiple）添加校验一进页面就触发校验bug
qq_42859450的博客
08-31 1271
element-plus select触发校验bug
ElementUI @change更改select 表单验证失效的解决办法
crabfrog的博客
11-03 4518
ElementUI @change更改select 表单验证失效的解决办法 起因是这样的，表单有一处，两个Select 选择器是上下级的关系，于是我想到了使用Cascader 级联选择器，来避免先选后选的问题。但是这里的选项 是分成两个数组的 提交时也是两个字段。用v-model肯定是不行了。只好用@change来绑定值。 HTML <el-form-item label="申请项目" prop="applyProject"> <el-cascader
elementUI中select下拉框设置了多选multiple之后 一进页面就触发校验bug
吴小勇的博客
11-22 2867
封装select组件时，预留了多选的配置，但是配置过后发现，一进入组件后select组件会自动校验，百度了，大概都是说的时选择器输入框在data中的初始值。created钩子函数中，判断当前是否传入multiple参数，如果有传入表示多选，可以将钩子函数中将表单的初始值改为空数组 [ ] ，
element ui中下拉框设置了多选multiple之后 一进页面就触发表单校验
m0_58565372的博客
04-11 1493
注： _self.form对象为上述第一种方法中的form对象。2.使用钩子函数，在创建页面时，重置对应属性的值。1.页面初始化时，设置当前属性初始值为空数组。
解决Element-UI el-select多选下拉菜单校验时，默认触发问题
Doggi1023的博客
08-17 1983
在使用el-select多选下拉菜单时，如果当前需求需要校验的话，可能会出现页面加载完毕，多选菜单触发校验问题。
element-ui 多选框初始化时默认校验问题
yangchuangxyz的博客
09-26 725
多选框初始化时总是默认校验显示问题
element ui el-select 多选表单校验问题
2301_76431401的博客
08-09 1019
form表单绑定的form对象对应属性值为空字符串或者null（其他未尝试），表单中的多选下拉框会立刻执行校验并弹出校验信息。将多选下拉框对应的属性值默认值设置未空数组即可。：表单已进入就校验，框变为红色。
vue+elementui动态表单值的绑定与校验
小男哥的博客
09-10 4018
动态表单值的绑定与校验 我们都知道，为了让使用者更简单高效的开发，vue使用了表单元素双向绑定的模式。使用时每个表单元素都会在data中对应一个写死的变量，然后通过v-model进行绑定（v-model实现原理此处不做赘述，官网讲解很到位，面试基本会问到，请自行参考）。这种用法是最常用且易上手的，但是如果需求让我们做一个统一的组件，根据后端返回的json数据动态展示成相应的input、select、textarea、radio等元素，这种情况由于数据都是不确定的，之前的方法貌似有点行不通，怎么办呢？ 假
element-ui(饿了么)选择下拉框以及校验
weixin_45102492的博客
11-25 6801
问题描述 最近在使用elementUI做一个项目，遇到了一个小问题。需求是在新添加数据时，选择下拉框显示提示语(请选择XXX)，如果是修改的时候，默认显示的是从后台获取的数据。我是从后台获取的数字类型，需要默认的显示再下拉选择框中。 问题解决 看官网上的实例，el-option标签的数据源数组的每个对象有value和label两个属性，value对应的就是标签el-select中v-model绑定的 ...
Element UI//表单校验-2层表单可动态添加，且有el-table需要校验
weixin_37877794的博客
07-21 737
文章目录第一种：共2层表单，均需校验。第2层表单可动态添加，且有el-table需要校验（el-table也可以动态添加的）第二种：共2层表单，均需校验。第2层表单可动态添加，且有el-table需要校验（el-table也可以动态添加的）总结：注意两个案例中，el-table 中 prop校验的区别 第一种：共2层表单，均需校验。第2层表单可动态添加，且有el-table需要校验（el-table也可以动态添加的） 详细代码如下： <template> <div>
element-ui 表单自动校验
凡尘
04-20 210
element 表单自动校验
element from表单个别select 出现 一开始就校验了数据，且有数据还通不过校验，选中的项叉不掉问题。
凉城玖的博客
07-01 940
问题1： element from表单个别select 出现 一开始就校验了数据，且有数据还通不过校验。 前提条件： 校验规则都设置正确，都设置prop rules等情况下出现这个问题。 下面是我设置的规则校验： 出现原因： 在页面数据回显时的数据赋值方式不正确导致的（不一定是这个位置赋值导致的，也有可能是其他地方赋值导致的）。 解决办法： 给深层次对象赋值时，使用this.$set来赋值。 拿这个courses来说原本是 this.list.courseTimes = [...autoCourseT
el-select multiple 选择器多选控件，初始就会触发表单校验的问题
niyooooo的博客
05-19 1322
<el-select v-if="NextPoint.success" v-model="submitForm.messageReceiver" style="width: 50%" filterable multiple > 因为后端需要的下一步执行人为字符串 所以最开始写成messageReceiver: "", 结果打开页面就触发了表单验证 ...
解决element ui切换语言时,表单验证自动触发
weixin_44373861的博客
07-01 1373
项目国际化处理。一切换中英文，表单的验证就自动触发，一片红，影响观感。像这样： 可以在watch中监听语言变化 watch:{ //处理切换语言时，表单验证全部自动触发 "$i18n.locale": function () { this.$nextTick(() => { this.$refs.form.clearValidate() //form是你自己表单的ref属性值
Layui多选框的使用formSelect
qq_39736671的博客
11-29 1967
Layui多选框的使用formSelect1.页面2.js代码3.实例 1.页面 <form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-form-inline"> <fieldset class="layui-ele...
element form 对单个或几个input、select表单校验
alokka的博客
07-04 716
1. 对单个进行校验 this.$refs['form'].validateField('userName', async (valid) => { if (valid) return // code }) 2. 对几个进行校验 this.$refs['form'].validateField(['userName','mobileNumber'], async (valid) => { if (valid) return // code }) ...
在FormItem中使用Select时设置initialValue时的大坑
weixin_42737733的博客
09-20 1万+
这里写自定义目录标题在FormItem中使用Select时设置initialValue时的大坑 在FormItem中使用Select时设置initialValue时的大坑 很多小伙伴在写需求的时候，避免少不了对数据的增删改查，其中在可编辑的表单内往往都需要填入其默认值，今天我遇到的大坑就是在填入默认值之后，若不修改，在表单提交的时候想要获取默认值的信息的时候出现的问题。注意，这是使用Select...
Vue Element Select选择器自定义验证规则
路虽远行则将至，事虽难做则必成。
12-02 5082
在我们在做增删改查的时候，一般会遇到添加和修改的from表单需要表单验证。一般常规的from表单是有自己的验证规则，from加一个 :rules="rules"但他需要v-model值和prop值要一样，这是常规情况。我遇到的是，绑定多个负责人和对应的电话，加验证规则。实际场景1.我们在from表单绑定多个负责人就需要使用到 select 选择器，下拉的数据是点击打开弹框时发请求来的。2.点击选中的时候，数据时对象形式，id 名字 电话 绑定在一起的。选中负责人的时候，我们是把一整个对象存到数组里面。
select标签multiple属性的使用方法
热门推荐
gaohuanjie的专栏
07-10 1万+
select标签multiple属性的使用方法
elementui选择器多选下拉框收起时触发
最新发布
09-24
Element UI 的多选下拉框（el-cascader 或 el-select 的 multiple 模式）通常不会直接提供一个独立的“收起”事件，它更多的是通过用户交互或者组件内部状态变化来间接控制显示状态。当你点击下拉列表外部区域或者选择了所有选项之后，下拉框可能会默认收起。 如果你想要在特定情况下手动触发下拉框的收起，可以监听 `clear` 或者 `visible-change` 事件。例如： ```javascript <template> <el-select v-model="selectedValues" clearable @visible-change="handleVisibleChange"> <!-- ... 你的选项数据 --> </el-select> </template> <script> export default { data() { return { selectedValues: [], }; }, methods: { handleVisibleChange(isVisible) { if (!isVisible) { // 当下拉框不再可见时执行这里的操作 console.log('下拉框已收起'); } }, }, }; </script> ``` 在这个例子中，`handleVisibleChange` 方法会在下拉框的显示状态改变时被调用，你可以在这里判断是否需要执行收起操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值