vue+elementUI Select 选择器+Popover 弹出框的使用

最新推荐文章于 2024-07-19 16:05:29 发布

H-_-

最新推荐文章于 2024-07-19 16:05:29 发布

阅读量7.3k

点赞数 3

分类专栏： element组件文章标签： vue html

本文链接：https://blog.csdn.net/qq_38233837/article/details/108449777

版权

本文介绍了在Vue+ElementUI环境下，如何在Select选择器中，当鼠标悬停在选项上时，通过Popover弹出框展示相关答案。在实际应用中，由于Popover的默认样式可能会遮挡已选中的Select选项，文章总结了解决这个问题的方法。

摘要由CSDN通过智能技术生成

vue+elementUI Select 选择器+Popover 弹出框的使用

需求描述
- 代码如图
- 效果图
总结

需求描述

vue+elementUI环境中（前后端分离）下拉框（select选择器）中，鼠标箭头悬浮到选项上时提示一段内容，比如选择器选项都是一些问题，悬浮到某个选项时可以展示该问题的答案。

代码如图

// productQuestions 后端返回的数组 
	<el-select v-model="ids" placeholder="请选择" multiple collapse-tags filterable>
           <el-option
              v-for=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

H-_-

关注关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue+elementui 树形选择器组件 tree-select（可多选）

qq_29992739的博客

03-24

4528

树形选择器实现效果： tree-select组件： <template> <div> <div class="mask" v-show="isShowSelect" @click="isShowSelect = !isShowSelect"></div> <el-popover placement="bottom-start" :width="width" trigger="manual" v-mo

vue element ui select选择器+popover弹出框联合使用

weixin_43937851的博客

07-27

1092

vue element ui select选择器+popover弹出框联合使用

参与评论您还未登录，请先登录后发表或查看评论

vue实现一个简易Popover组件

weixin_30580341的博客

11-26

875

概述之前写vue的时候，对于下拉框，我是通过在组件内设置标记来控制是否弹出的，但是这样有一个问题，就是点击组件外部的时候，怎么也控制不了下拉框的关闭，用户体验非常差。当时想到的解决方法是：给根实例创建一个标记来控制，然后一级一级的把这个标记传进来。但是这样每次配置都要改根组件，非常不灵活。最近看museUI库，发现它的下拉框Select实现的非常灵活，点击组件外也能控制下拉框关闭，于是想探究...

el-popover嵌套select弹窗点击实现自定义关闭

最新发布

徐三岁的博客

07-19

699

也就是说， el-select 的 options 弹框不在 el-popover 弹出框上，点击options 弹框后会触发 popover 弹窗框的关闭条件，因此就会造成选择 el-select 选择器的选项后，外层的 el-popover 弹出框也会关闭。：在 el-popover 弹出框组件中嵌入 el-select 选择器组件后，点击 el-select 选择器选中选项后，不仅 el-select 选择器的选项弹框关闭了，外层 el-popover 组件的弹框也一并关闭了。

根据 el-popover封装自定义的下拉选择框

qq_36752532的博客

02-23

1817

单选&&多选当前组件的样式是可以和el-select 的样式功能一模一样。区别在于我的搜索在下拉框内部组件API 可继承于 elementUI 的原组件的API 由于目前业务没有涉及，只继承了部分API ，涉及 el-popover 、 el-checkbox 拓展一：根据选择项的多少做分页拓展二：根据实现懒加载功能拓展三：继承全部 element 组件的特性拓展四：底部按钮的功能样式再封装最好支持插槽并设置相对应的钩子.

解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题

shadow__jing的博客

07-26

3930

【问题】：在elementUI 中，el-dialog的内容比较多，出现滚动条，且内容包含input输入框、select下拉框、时间选择器、cascader级联选择器等，在点开select下拉选择框后并向下滚动鼠标，会出现下拉框跑出el-dialog的区域的情况（有可能离el-dialog的区域很远），造成页面的展示效果混乱。【解决方案】：我们可以在鼠标滚动的时候，让select弹框隐藏，这样就可以解决select 下拉框在el-dialog外面的问题了。在自己封装的el-dialog的组件里。

在el-select中使用title 鼠标移入出现选中后的提示

weixin_46069849的博客

09-29

3002

在el-select中使用title属性 <template slot-scope="scope"> <el-select style="width: 172px" :disabled="loginUser === 'AREA_ADMIN' ? false : true" :title="getClassOptionTitle(scope.row.plannedClassNumber)" v-model="scope.row.plannedClassN.

el-table-column设置fixed后，el-popover出现两个的解决办法。

yxorg的博客

11-17

2813

el-popover出现多个bug

vue-cli3-element-ui select选择器，popover弹出框修改默认样式

郝峰vip的博客

12-25

1315

前言在项目中遇到的问题，修改selecet选择器，popover弹出框的样式时失效，在这里记录录一下，方便以后使用。第一步：官方文档中的popper-class <el-select v-model="couponIdCopy" placeholder=" " @change="changeCoupon" class="change-coupon-select" popper-class="C

vue+elementUI实现日期快选组件

weixin_43930421的博客

05-16

667

如下图，利用 vue+elementUI 实现一个日期快选的组件。在这引用 dateUtil.js 工具包，参考： https://blog.csdn.net/weixin_43930421/article/details/124745006 代码实现在 components 文件目录新建 DateSelect.vue 文件。 <template> <el-popover v-model="showPopover" style="padding:8px

Vue2+ElementUI2开发常见问题

canxuezhang的博客

04-25

1923

Vue2+ElementUI2开发常见问题

element-ui关于el-select选择框多选出框外的解决

m0_64707449的博客

11-03

2673

关于el-select选择框多选出框外的解决

在动态表格中使用el-popver实现类似与el-select

LuckBaby_Yun的博客

08-04

799

1.使用el-popover的trigger="manual"手动激活导致弹框卡顿；最终使用trigger="click"激活；但页面设置disable时点击之后弹框依旧会弹出，可使用css进行隐藏，修改el-popover的样式不能写在scoped里面；3.表格如果有被固定列，el-popover会弹出多个，查找了很多解决方法，目前暂未解决，我这里将固定列取消了。注：因为是在table表格中进行使用，所以在绑定ref时要加上下标让其唯一。（1）.进入页面监听页面的滚动事件。（2）.关闭弹框页面销毁监听。

el-popover内有select的时候在选择后会自动关闭

bhchuan的博客

06-26

326

默认情况下，select的下拉框dom是添加到body元素中的，这就导致虽然视图层面看，select 下拉框在 popover body里面，但实际上他们是dom关系是兄弟元素，所以点击下拉框的行为对于 popover而言，和在popover外面鼠标点击的行为是一致的。这就导致popover也关闭了。尝试解决方法：将 select 组件的 teleported属性设置为false，使得它的下拉框被渲染在popover内部。

elementui中的el-popover无法正常显示

m0_61676604的博客

05-08

4377

elementui中的el-popover无法正常显示

Element Plus 在 popover 弹出框中嵌入 select 选择器，选中选项后弹出框被关闭

Alan_Walker688的博客

09-15

3049

Vue3 + Element Plus 项目中，在 `el-popover` 弹出框组件中嵌入 `el-select` 选择器组件后，点击 `el-select` 选择器选中选项后，不仅 `el-select` 选择器的选项弹框关闭了，外层 `el-popover` 组件的弹框也一并关闭了。

elementui popover 下嵌套select 的问题解决

q1025387665a的博客

07-27

3291

前言：这个问题的现象产生于这样当我点击下拉框的时候，由于select框在elementui 默认是在app外的，如图。导致我们的popover组件不能监听到他其实逻辑上是属于我们的app里头的。如果你的问题是类似的，那么可以参考一下我的解决方法。最终效果最终效果是当你的悬浮框存在的时候，移动到任何地方都不会隐藏这个容器。解决设置一个@visible-change的函数。 // 台风的下拉框出现、隐藏时触发的函数 selectVisibleChange: function (e

vue+ant vue select下拉框内容文本过长悬浮显示的方法

weixin_43994675的博客

02-04

4148

vue+antd select下拉框内容文本过长鼠标悬浮显示的方法 ```javascript <a-form-item label="结果："> <a-select allowClear show-search option-filter-prop="children" v-decorator="[ 'fileresults', { rul

Vue+ElementUI级联选择器Bug修复与优化

在Vue+ElementUI的集成开发过程中，级联选择器是常用的一种组件，它能够实现层级关系的数据展示和选择。然而，开发者可能会遇到一个特定的Bug，当后端返回的数据采用递归结构，且递归到最后一级时，部分数据可能缺失...