我用的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组件文字超过宽度时不出现横向滚动条问题的更多相关文章

  1. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  2. 基于element ui的级联选择器组件实现的分类后台接口

    今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...

  3. Element ui 中使用table组件实现分页记忆选中

    我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...

  4. element UI中的select选择器的change方法需要传递多个值

    如果直接调用change事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参数传递过去) 场景: 你需要将select选择器 ”选中的当前元素“ 和 ”其他你需要的值“ 一起传递过去 ...

  5. Element UI系列:Select下拉框实现默认选择

    实现的主要关键点在于 v-mode 所绑定的值,必须是 options 数组中对应的 value 值

  6. 解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找

    做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...

  7. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  8. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  9. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

随机推荐

  1. HTTPS抓包之Charles

    这里对HTTP请求的抓包操作不做讲解了,只讲解HTTPS的抓包要进行的操作. [说明]:下面以MAC电脑示例,Windows版本可参考:http://weibo.com/ttarticle/p/sho ...

  2. XCode 无法识别设备

    XCode 取消Unpair Device 后不能读取设备 1:退出XCode 2:断开设备连接 3:在终端执行‘sudo pkill usbmuxd’ 4:重启XCode 5:连接设备即可

  3. Netty:Channel 建立后消息发送失败

    1. 问题现象 Channel 建立后消息发送失败: ChannelFuture future = DeviceManager.getBootstrap().connect(); deviceChan ...

  4. javascript中的LHS和RHS

    最近在拜读<你不知道的javascript>,接触到一个比较陌生的概念,LHS查询和RHS查询. 简单的一句话来讲,当变量出现在赋值操作符的左侧时进行LHS查询,出现在右侧时进行RHS查询 ...

  5. scrapy 框架入门

    运行流程 官网:https://docs.scrapy.org/en/latest/intro/overview.html 流程图如下: 组件 1.引擎(EGINE):负责控制系统所有组件之间的数据流 ...

  6. websphere静态文件转发出错问题 SimpleFileServlet

    ERROR DESCRIPTION: Using a RequestDispatcher to explicitly forward to the WebContainer's SimpleFileS ...

  7. Maven项目报错:Missing artifact****和ArtifactDescriptorException: Failed to read artifact descriptor for***和Cannot change version of project facet Dynamic web module to 2.5

    一.关于Cannot change version of project facet Dynamic web module to 2.5 具体查看博客:http://blog.csdn.net/ste ...

  8. 06-TypeScript中的表达式

    TypeScript中提供了箭头表达式,通过箭头表达式可以简化我们的编码. 1.箭头表达式简化匿名函数 在JS中,我们通常使用匿名函数,匿名函数实际上是赋值给一个变量,常见的写法如下: var sun ...

  9. docker化java web应用

    一.简介 Docker是一个使用Go语言开发的开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的机器上.Docker的发展速度和火爆程度着实令人惊叹,一 ...

  10. 【API知识】MongoTemplate非映射方式操作Document

    前言 我是MongoDB小白,刚开始学.不过,我猜大多数使用MongoDB的,都是采用映射方式处理的,即需要有定义好的用于映射的实体类.但是这样的话,如果表的结构在未来可能频繁变动,增删字段,甚至添加 ...