el-autocomplete设置下拉框横向滑动条

原创 已于 2023-01-12 17:20:27 修改 · 762 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #elementui

于 2023-01-12 16:33:26 首次发布
文章介绍了el-autocomplete组件在ElementUI中的优势，特别是其能实现选中后的回显功能，与el-select不同。当下拉框内容过长时，可以通过CSS属性设置横向滑动条，提供更好的用户体验。

el-autocomplete

element文本输入框+下拉框，和el-select有相似之处

1、优点：可以实现选中或者输入选项后，input框第二次点击后的回显，而select选择器组件不能实现回显(这里的回显指，选中之后第二次点击会显示地存在上次所选择的，而不是变成灰色的隐式存在，主要方便用户在原有地基础上面进行修改)

2、下拉框内容过长，如何设置横向的滑动条
为css属性设置如下属性即可

  /deep/.el-autocomplete-suggestion__list{
        display: inline-block;
    }

横向滑动条效果如下图：
在这里插入图片描述
下拉框就可以左右横向滑动啦！

VUE中el-autocomplete候选词高亮
denglouhen的博客
11-27 1592
关键代码： <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Please input molecule、companies or patent/ip" @select="handleSelect" > <template slot-scope="{ item }"> <div class="autocomplete-choos.
修改el-autocomplete下拉列表的样式
weixin_42190844的博客
04-08 7778
碰到一个需求，我这里使用el-autocomplete，因为列表的内容可能很长，导致显示不全，影响阅读。 所以需要修改一下下拉列表的宽度为auto，使得其适应内容宽度，而不是继承父元素宽度。 一开始使用深度作用选择器，发现作用样式不生效，查看dom结构发现是因为下拉列表的class是插入至body下的，而不是vue app 下。所以无法作用到。 解决方法： 将popper-append-to-body设为false，然后再使用深度作用选择器。 上代码 <temp.
vue+Element中table表格实现可编辑（select下拉框）
11-20
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的下拉框数据也是根据id动态生成的，内容不同；有点类似于树形二级状态，后面的下拉框数据来源并没有在前面内容里，而是另外一个接口查询，具体操作如下： HTML代码： 1.在处理人列加入一个下拉框模板，其中v-model必须要scope.row.proJbruserValue来绑定，意思是这个值绑定到当前行所选中的人；如果直接绑定proJbruserValue，将不能进行差异化选择，(这里scope
vue中el-select下拉框文字过长时，导致dropdown溢出问题，加入横向滑动条
qq_39111164的博客
08-18 2386
问题描述： 解决方法： Code： <el-select v-model="strengthForm.route" placeholder="" style=' width: 100%' @focus="getRouteNameList()" filterable popper-class="select-dropdown"> <el-option v-for="item in routeList" :key="item.key" :lab
为select下拉框添加滚动条
10-18
当下拉菜单选项比较多的时候，select下拉列表内容过多，在IE中默认是30条选项，firefox默认是20条， 超过自动出现滚动条，但是在没出现滚动条时候样式特别不协调。本次上传的代码将提供一种方法将select下拉框添加滚动条
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
12-13
官网的demo献上 在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据 官网中的数据list都是写在loadAll...在template中添加el-autocomplete <el-autocomplete placeholder="请输入studentID" v-mo
基于Vue el-autocomplete 实现类似百度搜索框功能
10-16
在本篇文章中，我们将探讨如何利用Vue.js框架中的el-autocomplete组件来实现一个类似于百度搜索框的功能。Vue.js是一个流行的前端JavaScript框架，它允许开发者构建交互式的用户界面。el-autocomplete是一个具有自动...
vue element远程搜索下拉框出tooltip el-autocomplete下拉框出省略号时鼠标移上去出提示
yeyue1992的博客
03-11 2624
vue element远程搜索下拉框出tooltip el-autocomplete下拉框出省略号时鼠标移上去出提示 需求如下效果图如下对el-tooltip进行了二次封装组件使用 需求如下 1.element远程搜索框下 下拉框文字超出宽度后会出省略号 要求鼠标移上去能够出文字 效果图如下 对el-tooltip进行了二次封装 <template> <el-tooltip ref="tlp" :content="text" effect="dark"
el-autocomplete 使用clearable清除内容，再次点击输入框下拉条件不再显示问题
追风筝的博客
10-29 893
前段时间写后台管理项目时，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了。通过这个方法，你可以解决 el-autocomplete 使用clearable清除内容，再次点击输入框下拉条件不再显示问题。添加一个清除事件的方法。
el-autocomplete不显示下拉框，选中后还弹出下拉框，手动去掉输入框焦点
weixin_45599105的博客
02-28 1437
el-autocomplete不显示下拉框，el-autocomplete选中后还弹出下拉框，el-autocomplete手动去掉输入框焦点
select 横向滚动条
03-17
NULL 博文链接：https://yangy608.iteye.com/blog/551014
前端el-autocomplete实现搜索下拉框总结
YHY的日常
07-29 3007
1.标签中写法 <el-autocomplete popper-class="search-people-autocomplete" style="width:100%" v-if="addForm.alarmAreaRadio===1" v-model="addForm.alarmAreaType"
关于select的横向滚动条
leafe920的专栏
11-15 4039
写了一个弹出框 是一个table 只有一tr  第一个td是填选择条件 然后在第二个td里面展示  第二个td里面是一select 是一个设置了size的下拉框，也就是说选项是显示出来的 不用下拉  Java代码   'gongcheng' size='10' name='gongcheng' >              .....
el-autocomplete 中下拉数据滚动分页
csstmg的博客
05-22 1096
【代码】el-autocomplete 中下拉数据滚动分页。
给select添加滚动条
weixin_39721063的博客
08-05 3260
<select style="position: absolute; z-index: 1; margin-left: 40px;" class="choose" onblur="size=0" onmousedown="if(options.length>6){size=7}" onchange="size=0" > <option value="volvo">文学集</option> <opt..
Autocomplete 下拉框加滚动条
qq_42310995的博客
07-04 3261
引用：http://www.jqueryui.org.cn/demo/5669.html&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Untitled Page&lt;/title&gt; &lt;script src="http://libs.baidu.com/...
vue elementUI 自定义框组织树，选择select下拉组织树横行滑动条出现方法
weixin_46567616的博客
11-28 1243
背景：最近公司开发需要使用到组织树进行组织结构的选择，在开发途中遇到两个次组织树已超过外框，但超出部分不显示横向滑动条。第二种是选择下拉框内配置组织树，但宽度超了却不出现横向滑动条，详细请看下篇文章。第一种情况是在添加了下面类属性才显示横行滑动块。
vue select选择下拉组织树，解决不出现横向滚动条
weixin_46567616的博客
11-28 1300
注意：groupList为组织结构的数据，具体情况结合自己的项目。背景：由于项目需求需要使用下拉选择框的组织架构树。才正常出现横向滚动条。
2010.09.27———关于select的横向滚动条
12-06 366
2010.09.27———关于select的横向滚动条 写了一个弹出框 是一个table 只有一tr 第一个td是填选择条件 然后在第二个td里面展示 第二个td里面是一select 是一个设置了size的下拉框，也就是说选项是显示出来的 不用下拉 [code="java"] ..... [/code] 但是 有一个问题 就是 option选项可能会有几...
如何将el-autocomplete下拉框高度调整
最新发布
11-05
<think>我们正在讨论的是element-ui中的el-autocomplete组件。用户想要调整其下拉框的高度。 根据element-ui的文档，el-autocomplete的下拉框实际上是一个el-select-dropdown组件，它可以通过popper-class属性来添加自定义类名，然后通过CSS来调整样式。 另外，也可以直接通过全局CSS来覆盖默认样式，但更推荐使用popper-class来避免全局污染。 方法： 1. 使用popper-class属性给下拉框添加自定义类名。 2. 通过CSS设置下拉框的最大高度（max-height）或者高度（height），同时可能需要调整下拉框的内边距（padding）和边框（border）等。 示例代码： 在模板中： <el-autocomplete popper-class="my-autocomplete" ...其他属性 ></el-autocomplete> 在CSS中： .my-autocomplete { max-height: 300px; /* 设置最大高度 */ overflow-y: auto; /* 允许垂直滚动 */ } 注意：如果仅调整高度，可能需要同时设置overflow-y:auto，这样当选项超出高度时会出现滚动条。 另外，如果希望更改每一个选项的高度，可以通过设置.el-autocomplete-suggestion__item的样式来实现。 例如： .my-autocomplete .el-autocomplete-suggestion__item { line-height: 30px; /* 调整行高 */ padding: 0 10px; /* 调整内边距 */ } 或者，如果只想调整整个下拉框的高度，而不改变每个选项的高度，只需调整max-height即可。 但是注意：根据element-ui的版本，类名可能有所不同，请根据实际版本调整。 如果用户使用的是element-plus，方法类似，但类名可能为.el-autocomplete__dropdown。 因此，我们需要确认用户使用的是element-ui还是element-plus。不过，考虑到问题中写的是el-autocomplete，这常见于element-ui，但element-plus也有相同的组件。 由于用户没有明确，我们按照element-ui来回答。 此外，如果用户想要动态调整高度，可能需要通过JavaScript计算高度然后动态设置样式，但这种情况较少，一般通过CSS即可。 因此，我们提供上述方法。 生成相关问题： 1. 如何自定义el-autocomplete下拉框的样式？ 2. 如何调整el-autocomplete下拉框中每个选项的高度？ 3. el-autocomplete的下拉框出现位置不正确怎么办？ 4. 如何使el-autocomplete下拉框的宽度与输入框一致？ </think>要调整 Element UI 中 `el-autocomplete` 下拉框的高度，可以通过以下方法实现： ### 方法 1：CSS 全局样式覆盖 ```css /* 下拉框容器 */ .el-autocomplete-suggestion { max-height: 300px !important; /* 修改最大高度 */ overflow-y: auto !important; /* 添加滚动条 */ } /* 单个选项高度 */ .el-autocomplete-suggestion__item { line-height: 40px !important; /* 调整行高 */ padding: 0 20px !important; /* 调整内边距 */ } ``` > **优点**：简单快捷 > **注意**：使用 `!important` 覆盖默认样式 ### 方法 2：通过 `popper-class` 添加自定义类 ```html <el-autocomplete popper-class="custom-autocomplete" ...其他属性 ></el-autocomplete> ``` ```css .custom-autocomplete { max-height: 400px; overflow-y: auto; } .custom-autocomplete .el-autocomplete-suggestion__item { line-height: 45px; padding: 0 15px; } ``` > **优点**：避免全局样式污染 > **原理**：`popper-class` 将类名注入下拉框根元素[^1] ### 方法 3：动态计算高度（JS） ```javascript // 在mounted生命周期中操作DOM mounted() { const dropdown = document.querySelector('.el-autocomplete-suggestion') if (dropdown) { dropdown.style.maxHeight = '500px' dropdown.style.overflowY = 'auto' } } ``` > **适用场景**：需要响应式高度时 > **注意**：确保 DOM 已渲染完成 ### 重要注意事项 1. **滚动条问题**：必须同时设置 `max-height` + `overflow-y: auto` 2. **选项高度**：调整 `.el-autocomplete-suggestion__item` 影响单个选项 3. **样式优先级**：自定义样式需放在 Element UI 样式文件之后加载 4. **响应式设计**：可使用 `calc()` 函数实现动态高度，如 `max-height: calc(100vh - 200px)` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值