解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题
我用的element-ui是V1.4.3.
目前遇到一个问题,在用el-select组件的时候,当选项的内容很长的时候,会撑开下拉菜单的宽度,这样影响美观。具体如下图所示:

解决这个问题的思路:设置下拉菜单的最大宽度,然后文字超出时,出现横向滚动条。
解决时的问题就是,设置了宽度,横向滚动条却不出现,如下图所示,直接将超出的文字隐藏,并且后面添加省略号

最后我添加了如下的代码:
.el-select-dropdown{
max-width: 243px;
}
.el-select-dropdown__item{
display: inline-block;
}
.el-select-dropdown__item span {
min-width: 205px;
display: inline-block;
}
效果如下,横向滚动条顺利出现:

解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题的更多相关文章
- Element ui 上传文件组件(单文件上传) 点击提交 没反应
element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...
- 基于element ui的级联选择器组件实现的分类后台接口
今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持. 这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...
- Element ui 中使用table组件实现分页记忆选中
我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...
- element UI中的select选择器的change方法需要传递多个值
如果直接调用change事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参数传递过去) 场景: 你需要将select选择器 ”选中的当前元素“ 和 ”其他你需要的值“ 一起传递过去 ...
- Element UI系列:Select下拉框实现默认选择
实现的主要关键点在于 v-mode 所绑定的值,必须是 options 数组中对应的 value 值
- 解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找
做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
随机推荐
- leetcode144-先序遍历非递归实现
二叉树的先序/中序/后序遍历递归/非递归实现,讲的很清楚,其中后序遍历和先序中序的处理有些不一样: https://blog.yangx.site/2016/07/22/Python-binary-t ...
- 仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥……我的那个个人博客做好了-->(我的博客)<--.嘿嘿 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下, ...
- ES6-字符串扩展-padStart(),padEnd()
ES6 引入了字符串补全长度的功能,如果某个字符串不够指定长度,会在头部活尾部补全. padStart() 用于头部补全: padEnd() 用于尾部补全. 上面代码中,padStart 和 padE ...
- Android NDK学习(三):Hello World
版权声明:转载请说明出处:http://www.cnblogs.com/renhui/p/6925810.html 首先编写Jni接口的c文件,此文件命名有些特殊,具体的命名方式可以参考文档来做. # ...
- [CocoaPods]终端方式加载第三方库
终端方式集成第三方库 1.打开终端,转到当前工程所在的文件夹. 方式一: [访达]->[服务]->[系统偏好设置] ->勾选[新建位于文件夹位置的终端标签 ]和[新建位于文件夹位置的 ...
- WCF绑定netTcpBinding寄宿到控制台应用程序
契约 新建一个WCF服务类库项目,在其中添加两个WCF服务:GameService,PlayerService 代码如下: [ServiceContract] public interface IGa ...
- speex与webrtc回声消除小结
回声消除AEC包含: 延时估计对齐+线性自适应滤波器+NLP(双讲检测.处理)+舒适噪声CNG 一.speex aec 1.没有NLP 2.只考虑实时DSP系统,即是没有延时对齐等 3.自适应滤波 ...
- Ehcache3开发入门简介
在高并发应用中缓存就是核心机制.最近在研究Ehcache,发现这是一个更加灵活易用的缓存框架(相对于Redis.Memcache),Ehcache更加小巧轻便.而且都有持久化机制,不用担心JVM和服务 ...
- 发布一个关于SharePoint的管理小工具
源码地址: https://github.com/GavinHacker/SiteCollectionManager 这是一个C#可执行程序,用于添加,删除,备份,还原SharePoint站点,可以 ...
- ubuntu16.04 程序开机自启动设置及启动优化
使用过程中,为了方便使用,有一些程序需要开机时自启动应用,下面将介绍一下ubuntu16.04下程序的开机自启动设置方法. 1 建立一个可执行程序的运行脚本如 keepalive.sh.内部写入要执 ...