vue3+element-plus中select组件首次触发@visible-change请求数据下拉框隐藏不了

最新推荐文章于 2024-04-13 15:50:45 发布
最新推荐文章于 2024-04-13 15:50:45 发布
阅读量4k 收藏 1
点赞数 2
文章标签： vue js javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baozilianya/article/details/115350770
版权
问题： vue3+element-plus中select组件第一次触发@visible-change请求数据之后下拉框隐藏不了
描述： 使用vue3+element-plus封装了一个表单查询组件,但是使用el-select组件中的@visible-change事件,点击出现下拉框时, 请求接口数据, 数据返回成功, 但是再次点击框时, 下拉框隐藏不了, 最开始同事说可能是element-plus版本问题, 让我升级版本看看, 升级了版本以后还是不行 (升级版本号如下),
// package.json文件
 "element-plus": "^1.0.2-beta.33",
后面以为自己的封装的代码写法有问题, 但是使用多种方式封装都不行, 就直接使用了element官网的el-select组件试水, 结果还是出现了一样的问题… 后面索性直接 【npm i】重新装包，然后出现了如下提示

在这里插入图片描述

解决： 好像找到了问题所在…之前的vue版本是3.0.0的，然后【npm i vue@3.0.7】，重启项目，问题解决！

在这里插入图片描述

包子脸呀
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。 =======以下是之前的说明===== 原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 、 JWT 、 Redis 、 Mybatis-Plus 、 Knife4j 等技术栈搭建的前后端分离开源权限管理系统。 在线预览地址：http://vue3.youlai.tech 开源仓库地址：https://gitee.com/youlaiorg/vue3-element-admin 后端仓库地址：https://gitee.com/youlaiorg/youlai-boot
element-ui中select下拉菜单中visite-change的使用，只在select中的option显示和隐藏时调用
weixin_43989837的博客
09-01 7092
一，元素 @visible-change=‘getGiftListTable’ 需要写到select标签中 <el-select v-model="model.giftIds" value-key="giftId" placeholder="礼物特效" multiple @visible-change='getGiftListTable'> <el-option v-for="item in giftList" :key="item.giftId" :labe
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
深入解析JS中的visibilitychange事件：监听浏览器标签间切换的利器
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
04-13 2497
简单的说，当用户最小化网页或移动到另一个标签时，API会发送 visibilitychange 有关该网页的可见性的事件。以前看到过一些网页，在标签切换到其它地址时，网页上的标题上会发生变化，一直不知道这个是怎么做的，最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定，这里将介绍一下页面可见性（Page Visibility）API的简单应用。hidden : 页面内容是对用户不可见。实际上，这意味着该文档是后台标签页或最小化窗口的一部分，或者系统锁屏是时的状态。
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 ........
vue3 element-plus @visible-change默认触发两次事件的解决方法
H_Dsheng的博客
07-16 7845
解决@visible-change默认触发两次事件发送两次请求的问题
(vue)el-select根据下拉框显示隐藏的visible-change的事件使用
nyf_unknow的博客
10-12 2210
【代码】(vue)el-select根据下拉框显示隐藏的visible-change的事件使用。
点一下触发一下选择框，visible-change
热门推荐
D_D_an的博客
04-29 1万+
vue3 + elementPlus实现select下拉框插入确定和取消按钮。
qq_54753561的博客
09-18 3655
vue3 + elementPlus实现select下拉框插入确定和取消按钮。
select
XiariXYH的博客
01-18 559
select组件
Vue3 框架 + Element-Plus 库 + mockjs 假数据 + vue3-demo + 环境已经配好拿来就用
07-06
内容概要：该 Vue3-demo 是基于 Vue3 框架搭配 Element-Plus ui库，建立的简单工程，并搭建了 Mockjs 和 axios工具，可以快速开发的工程，已经成功引入并建立了一个基于 Element-Plus 库中 table 组件的页面; 适用人群：想要了解 Vue3 新语法以及项目的，想要查看如何引入 Element-Plus 库及 Mockjs 的假数据如何使用及引入语法的, 想要基于已经成功引入这些组件的基本工程，来事件新的 Vue3 demo 的； 其他说明：里面用的是 Vue3 新语法，使用 Element-Plus 库创建了一个表格页面，可以搭建新的页面;
基于vue3+element-plus+springboot+mybatis+jpa+mysql的宿舍管理系统源码
05-24
本系统作为vue3初学者的入门系统，通过开发经典的《宿舍管理系统》模拟项目，使vue2的初学者快速掌握从无到有的搭建一套vue3+element-plus前端+spring boot后端+mysql数据库的前后端分离的现代主流项目架构。...
基于vue3+element-plus的管理系统.zip
05-16
基于vue3+element-plus的管理系统 基于vue3+element-plus的管理系统 基于vue3+element-plus的管理系统 基于vue3+element-plus的管理系统 基于vue3...
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
vue3为element的select组件添加底部固定操作列
Wykxsl的博客
11-16 2584
最近公司老系统准备用vue3重构,其中涉及到选择器新增选项,本来以为就是在选择器旁边加一个新增按钮,心想就不是小case嘛?就开始身体一瘫,开始划水,安心等待UI小姐姐的整体布局。后来实在无聊了打开小姐姐的设计图 ???这是啥???怎么好像大概可能跟我想的不一样啊。揉了揉眼睛再三确认了一下,发现事情果然没有自己想象的那么简单,算了,好男人怎么能辜负小姐姐的一片苦心。埋头就是干呗。 首先想到的就是去看看element官方有没有提供相应的插槽,乘兴而去然后败兴而归,果然element没有让我失望,没
vue3+elementPlus el-select组件同时支持label和value模糊查询
liuzaixi的博客
10-17 1273
element ui的select组件设置filterable后, 默认支持的是通过label来进行过滤搜索,注意：遍历的时候的key值不要用index，因为数组是事实变换的会无法找到对应的项，最好是用value值。功能要求：下拉框数据展示label+value，选中后的数据只展示label。visible-change(下拉框出现/隐藏时触发)的事件来实现功能.想要下拉框数据里同时显示label和value可以用插槽的方式。官方文档上提供了filter-method来自定义搜索方法。
关于element-ui 下拉框select 编辑弹窗打开时 触发change事件解决方法思路
monkey7
10-09 6625
change是下拉框值变换时就触发 由于编辑是从无到有的过程 所以他默认为 证件类型 被修改了 继而清空idnum 证件号码 解决方法有两个 1: 给falg标识 默认为0 第一次打开是 flag = 0 不执行 change过后flge++ 提交按钮flag=0 2: 阅读官方文档发现 el-select 有个叫visible-change的事件是 根据下拉框打开关闭触发的 此函数里面传递两个参数（第一个为回调参数， 第二个为自定义的参数） 例如报送项目中 日期类型 visible-change($eve
vue3 + element-plus
03-26
Vue 3是一种流行的JavaScript框架，用于构用户界面。它具有响应式数据绑定和组件化的特性，使得开发者可以更轻松地构建交互式的Web应用程序。 Element Plus是一个基于Vue 3的UI组件库，它提供了一美观、易用且高效的组，可以帮助开发者快速建出现代化的Web界面。 3与Element Plus的结合可以让开发者更加便捷地开发出功能丰富、美观的Web应用程序。Element Plus提供了量的组件，如按钮、表单、表格、弹窗等，这些组件可以直接在Vue 3项目中使用，并且具有良好的可定制性。 在使用Vue 3 + Element Plus时，你可以通过以下步骤进行配置和使用： 1. 安装Vue 3和Element Plus：通过npm或yarn安装Vue 3和Element Plus的依赖包。 2. 创建Vue 3项目：使用Vue CLI创建一个新的Vue 3项目。 3. 引入Element Plus：在项目中引入Element Plus的样式和组件。 4. 使用Element Plus组件：在Vue组件中使用Element Plus提供的各种组件，根据需要进行配置和定制。 5. 构建和运行项目：使用Vue CLI提供的命令进行项目的构建和运行。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值