element ui中select 下拉框在火狐浏览器最后一行显示不完全(谷歌正常)

news/2024/7/10 1:53:42 标签: vue, elementui

在项目开发的时候用到了el-scrollbar组件 并且设置了隐藏横向滚动条
下面展示一些 内联代码片

// 隐藏横向滚动条
.el-scrollbar__wrap {
	overflow-x: hidden;
}
// 竖向
.el-scrollbar__bar.is-horizontal {
	height: 0 !important;
}

因为有以上设置 所以导致在火狐浏览器的时候最后select 下拉框最后一行总是显示不完全 所以解决方法如下
下面展示一些 内联代码片

.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
	overflow: scroll!important; // 记得加上!important
}

友情提示:1、以上涉及element ui的元素css在改动的时候请不要写在 sass · 或者 less里面 建议直接在下面重新写一个style标签 。
2、!important 记得一定加上 否则可能会导致不生效。
3、这种修改会涉及所有用到的同样的标签 即a和b页面都用了select 对a页面的select样式做了修改同样会影响b页面的select样式
4.如果不想影响全局可以使用/deep/ 博客另一篇文章有写附上链接
https://blog.csdn.net/miem_yang/article/details/119638729
下面展示一些 内联代码片

// 举个栗子
<style lang="less" scoped> </style> // 里面写本页面的css
<style> </style> // 里面写原生要修改的css

http://www.niftyadmin.cn/n/1367420.html

相关文章

关于css中的/deep/的用法(修改elementui库的css但是不影响全局)

在项目中我们经常会用到Less或者Sass 。其中Scoped CSS规范是Web组件产生不污染其他组件&#xff0c;也不被其他组件污染的CSS规范。以elementui库为例 如果我们想修改某一个输入框的长度 但是不想影响全局 这时候就体现了/deep/的重要性 下面展示一些 内联代码片。 // 修改输…

vue根据屏幕大小设置css样式(实时监控屏幕大小)

pc端当屏幕缩小时总会有些css样式不适配 以下代码可以实时监测屏幕大小 下面展示一些 内联代码片。 // 需要动态修改的css <div :class"isWidth ? title : title2">11111</div>// 定义一个变量 return {data(){screenWidth:document.body.clientWidth…

vue v-for循环出来的数组加不同的颜色(颜色循环)

上面方块是由后端返回的数组 需求是每四个方块循环不同的背景颜色 下面展示一些 内联代码片。 // 具体v-for的代码块 <div v-for"(item, index) in appList" :key"index"><span :style"{background:item.color}"></span> //…

vue前端实现下载本地文件(不调用后台接口下载文件模板)

今天给的需求是希望前端本地直接下载模板 不调用后端接口 以下提供两个简单的方法 方法一&#xff1a;使用elementui 下面展示一些 内联代码片。 <el-button type"text" icon"el-icon-download" click"handleDownload">模版下载</el-b…

vue elementui表单验证组件动态修改required状态

最近遇到的需求&#xff1a;在一个表单里&#xff0c;有一个单选项检查结果&#xff1a;&#xff08;无问题 有问题 不适用&#xff09;&#xff08;必填&#xff09;和输入框问题描述下拉框整改状态&#xff1a;(选填)&#xff0c;当检查结果选项值为&#xff08;有问题&#…

二、职场生活

19年毕业到现在已经两年多了&#xff0c;期间换过两家公司。虽然现在我过得还算惬意&#xff0c;但就觉得自己现在的生活就像是在温水煮青蛙&#xff0c;煮我这只懒青蛙。 其实还得感谢我的第一家外包公司&#xff0c;因为在那里受了太多的苦和煎熬。虽然那段日子很难熬但是我也…

Vue/Js 将两个数组合并生成一个对象数组 并为其添加相应的key值

有两个数组&#xff08;示例&#xff09;&#xff1a; let arr1 [张三&#xff0c;李四&#xff0c;王五] let arr2 [18, 19, 20] 你想实现的效果 arr3 [{name: 张三,age: 18},{name: 李四,age: 19},{name: 王五,age: 20} ]实现函数如下 arr1.forEach((item, i) > {arr…

vue后台管理系统根据不同操作员设置页面按钮权限

需求&#xff1a;后台管理系统 需要不同身份的操作员登录系统分别拥有不同的按钮权限 思路&#xff1a;给页面需要控制的每一个按钮一个唯一编码&#xff08;id的意思&#xff09;&#xff0c;后端可以通过接口&#xff08;我这个系统是登录接口返回的&#xff09;返回当前登录…