element ui 下拉组件 el-select 禁用时鼠标悬浮没有禁用图标 显示小手 要到边边上才会显示禁用图标

最新推荐文章于 2024-01-12 14:14:05 发布
原创 最新推荐文章于 2024-01-12 14:14:05 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #html5 #css

本文介绍了一个Element UI下拉框在禁用状态下样式显示不一致的问题，并通过使用CSS变量的方法解决了该问题。

如图所示 该下拉框实际为禁用状态 但是鼠标移上去会显示小手 效果扔为禁用状态 需要移动到边框位置才会显示禁用图标

在这里插入图片描述
如图所示
在这里插入图片描述
虽然不影响禁用效果 但看着很不爽

于是使用css变量

在el-select组件上使用css变量
在这里插入图片描述

在css中使用
在这里插入图片描述
至此问题解决

暂时只想到这个方法 记录一下 如有更好的方法欢迎指点

super5⁢
关注
elementUI动态表单 + el-select 按要求禁用
nothing_2020的博客
11-24 9810
项目通过 vue+elementUI 实现 近期开发过程中遇到一个需求，对于从事两年的“小白”来说，确实费了点脑子，才发现，好像是自己一开始想太多了，各种情况设想了一溜够，发现只要反过来想就OK了 ╮(╯▽╰)╭ 需求大概是这样的： 在动态增减的表单项中，有一个下拉菜单，要求每选择一项，就把选中过的那一个选项禁用（简单来说就是，已经选过的就不能再选了），且增加的条数不能超过下拉菜单中的选项数量 直接上图吧（label不重要，主要看效果。。。） 先实现最简单的：限制新增数量 判断已新增的数量是否小于下拉菜单
当鼠标指向一个禁用的按钮时，在一个编辑框上显示提示信息
04-23
当鼠标指向一个禁用的按钮时，在一个编辑框上显示提示信息 当鼠标指向一个禁用的按钮时，在一个编辑框上显示提示信息，这样可以让用户知道禁用的原因。 更多内容见vcshare.net 在线求助：hedanwang.cn/bbs/
VUE+ElementUI 多选框/单选框鼠标hover悬浮时的提示信息组件
qq_45726323的博客
06-27 3984
VUE+ElementUI+js编写一个多选框/单选框，当鼠标hover悬浮时的提示信息组件。
## el-select option内鼠标悬浮文字提示
qq_44721405的博客
12-07 2459
el-select option内鼠标悬浮文字提示 前置条件 option固定宽度而内容文字超出 主要 ：:title=“item.text” 鼠标悬浮在option时提示内容 <el-option v-for="item in option" :key="item.value" :label="item.text"
elementui下拉框禁用和加特殊标识
weixin_45816407的博客
01-11 1785
特别注意，在el-option中，设定disabled值为 true，即可禁用该选项。拉取数据，传usageStatus: ‘1’，过滤掉警用的。
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
el-select 下拉框多选实现全选的实现
10-16
在Web前端开发中，el-select是Element UI库中提供的一个常用的下拉选择组件。它可以方便地实现单选或多选功能，但在某些场景下，用户需要实现全选功能，即在多选下拉框中可以选择或取消选择所有选项。文章《el-...
有关el-select选择器内容展示不完整的解决方案
J_mine的博客
04-09 6128
最近接手个工程， 发现了el-select展示不完整；效果如下如图 应该是代码里有之前设置的默认样式导致； 不过由于时间太紧急，没来得及细细查找问题 而是采用了个简单粗暴的办法。 1. 给el-select 标签上插入 :popper-append-to-body="false" 2. css样式 里写 ::v-deep .el-select-dropdown__wrap.el-scrollbar__wrap { margin-bottom: 0 !important; .
使用el-tooltip展示el-select多选项collapse-tags collapse-tags-tooltip
zhaowenxue的博客
05-27 6622
使用前提是el-select选择后展示后端返回的数组并且禁用状态下collapse-tags-tooltip失效。而且el-select有宽度高度限制 1.话不多，直接上代码 <el-tooltip class="box-item" effect="dark" :content="(contForm.jdxwList).join(',')"
disabled el-select禁用样式 修改 去掉禁用样式 disabled 变为 readonly
weixin_50885665的博客
02-27 2473
【代码】disabled el-select禁用样式 修改 去掉禁用样式。
element-ui禁用组件时展示禁用小图标
qq_42243957的博客
11-26 3123
element-ui el-table表格勾选框条件禁用，及全勾选按钮禁用， 记录
热门推荐
xh1506101064的博客
01-12 1万+
表格的部分内容是可以被勾选的，部分内容是不可以被勾选的使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的。
el-table中关于el-select下拉选项的禁用
weixin_41897680的博客
04-27 5420
el-table中关于el-select下拉选项的禁用
element-ui给禁用的按钮设置鼠标经过显示tooltip的tips提示
weixin_45096939的博客
11-25 4068
想要达到禁用的按钮鼠标经过时出现tips提示，解决办法是：在button外面再套一层标签，tooltip包裹里的第一级是谁，那么tips就是加给谁的，所以我们把tips加给button的外层，那个按钮的禁用disabled只会影响按钮而不会影响其他元素。我们在禁用按钮的时候，其实把tips也禁用掉了，tooltip就是包裹button的，那个tips就是加在按钮上，按钮都被禁用了，tips怎么可能还会出现呢？情境：按钮禁用的时候显示tips提示。
Vue解决el-select下拉框选择值后框上不显示问题
ningmengbu_suan的博客
07-19 3335
Vue解决el-select下拉框选择值后框上不显示问题
vue实现鼠标悬停出现图标
Gpointy的博客
11-04 526
0 效果 1 样式
element的el-time-select 下拉框位置偏移解决思路
weixin_44416517的博客
11-27 2883
element的el-time-select 下拉框位置偏移的情况，在没有popper-append-to-body属性的情况下的解决思路
如何实现element-ui使用el-select时，下拉内置添加全选功能
最新发布
09-04
在使用 Element UI 的 `el-select` 组件时，为下拉选项添加内置全选功能可以通过以下方式实现。我将提供一个完整的解决方案，包含样式调整和功能逻辑。 ## 完整实现方案 ```vue <el-select v-model="selected...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值