element UI-远程搜索（el-autocomplete）修改下拉框的样式

最新推荐文章于 2024-05-09 16:46:01 发布
最新推荐文章于 2024-05-09 16:46:01 发布
阅读量1.3w 收藏 6
点赞数 3
分类专栏： 前端 element-ui vue 文章标签： element UI vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JustDI0209/article/details/89176444
版权
前端 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
vue
15 篇文章 0 订阅
订阅专栏
element-ui
12 篇文章 0 订阅
订阅专栏

记录实现改变下拉框的功能

1.默认样式

el-autocomplete下拉列表的宽度默认与输入框的一样。当远程搜索返回的字段过多时，部分字体会被掩盖。查看官方文档，发现popper-class

popper-classAutocomplete 下拉列表的类名

2.添加popper-class

3.确定元素

调试中发现，打包后的下拉列表是放在一个div中

4.编写样式

 

JustDI-CM
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
12-29
html: <template> <el popper-class=my-autocomplete custom-item=my-remote v-model=state fetch-suggestions=querySearch placeholder=默认空 icon=close on-icon-click=handleIconClick> </el> </template> js: [removed] import Vue from 'vue' Vue.component('my-remote',
elementUI中el-autocomplete和el-select用法和各种坑
以马内利的博客
12-22 3374
又或者是如果第一次搜索”北京“，出来北京的列表，选择”北京美丽安全有限公司“后，再次把”美丽安全有限公司“删掉，在弹出的列表中没选择，直接点击旁边，隐藏了列表，再点击提交按钮。但又出现新的问题，打开dialog中首次输入公司，查询出来的列表。但是其他id值没被清空，还是上一次选择的，在提交的时候随便输入一个名字，没选择，对应的id是有值的，还能提交，这就是另外一个bug了。需求：要在文本框中通过输入关键字模糊搜索出一个列表，在列表中选中一个值后，这个选中的对象的其他属性要赋值到提交对象上，用于提交。
基于vue3 el-autocomplete实现远程搜索功能
最新发布
weixin_44257822的博客
05-09 216
autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。使用elementui input组件。
el-autocomplete扩展使用-底部增加固定操作行
weixin_42190844的博客
04-15 2449
修改el-autocomplete下拉列表的样式 继上一篇文章，需求需要修改下拉列表的宽度后。 又来新活了，这次需要在下拉列表底部增加一个快捷新增按钮，如图所示。 看了一遍文档，el-autocomplete并没有提供这样的底部插槽。只有一个item的插槽，可以自定义模板。 但这只能控制每一项的内容，并不能在底部添加一个自定义内容，除非通过操作dom的方式去动态添加。 在准备放弃使用el-autocomplete,改用el-select来实现需求的时候。我在element-ui的官网发现了他的搜索框，使
el-autocomplete修改下拉框宽度
Expaner的博客
05-20 5132
需求为在输入框中输入内容后，下面弹出匹配到的内容，没有匹配到就显示当前内容,实现后发现下拉框和输入框宽度一样，并不能完全显示全后台返回的内容，如下图 f12后发现下拉的代码并没有在当前div下，而是在body下，如下图 因此直接在页面上修改样式，不起作用，官方也没有说，查了很多文献，发现了解决方案，需要在模块中添加:popper-append-to-body="false"，然后在看下拉框就到div下面了，然后再修改css样式：& /deep/ .my-kqoption {width:
修改el-autocomplete下拉列表的样式
weixin_42190844的博客
04-08 6287
碰到一个需求，我这里使用el-autocomplete，因为列表的内容可能很长，导致显示不全，影响阅读。 所以需要修改一下下拉列表的宽度为auto，使得其适应内容宽度，而不是继承父元素宽度。 一开始使用深度作用选择器，发现作用样式不生效，查看dom结构发现是因为下拉列表的class是插入至body下的，而不是vue app 下。所以无法作用到。 解决方法： 将popper-append-to-body设为false，然后再使用深度作用选择器。 上代码 <temp.
前端el-autocomplete实现搜索下拉框总结
YHY的日常
07-29 2731
1.标签中写法 <el-autocomplete popper-class="search-people-autocomplete" style="width:100%" v-if="addForm.alarmAreaRadio===1" v-model="addForm.alarmAreaType"
Elementui el-autocomplete下拉框自适应宽度
WGYHAPPY的博客
06-23 4515
<el-autocomplete v-model='challengeId' popper-class="el-autocomplete-suggestion" :popper-append-to-body="false":fetch-suggestions="querySearchItem" @select="handleSelect"></el-autocomplete> <style scoped> /deep/ .el-autocomplete-sugges.
el-autocomplete修改默认样式 不生效问题（已解决）
蓝胖子的博客
11-17 4277
问题：修改el-autocomplete 默认样式 重写 覆盖 使用深度选择器 也还是没有解决问题 **原因：**发现渲染后的dom元素不在#app元素内部。原来是el-autocomplete里面的.el-popper元素渲染后会脱离#app。所以使用深度选择器也无法定位该元素。 解决办法：研究文档发现el-autocomplete组件自带的一个属性可以解决问题 方法如下： 在el-autocomplete 上增加一个属性:popper-append-to-body=“false”，这个属性用于将渲染后
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
12-13
在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据 官网中的数据list都是写在loadAll()中的，而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。 -mock数据的获取- 我们要获取远程mock...
详解element-ui中el-select的默认选择项问题
10-16
此外，`el-select`还有一些其他特性，如多选模式（通过设置`multiple`属性）、远程搜索（通过`remote`和`filterable`属性）等，它们也可以影响默认选择项的处理。例如，在多选模式下，`v-model`应绑定到一个数组，...
基于Vue el-autocomplete 实现类似百度搜索框功能
10-16
本文通过代码给大家介绍了Vue el-autocomplete 实现类似百度搜索框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
chakra-ui-simple-autocomplete:Chakra UI的简单自动完成
05-24
Chakra UI简单自动完成使用Chakra UI构建的简单自动完成输入演示版安装npm install chakra-ui-simple-autocomplete用法TSX / Typescript的用法示例 import { Autocomplete , Option } from 'chakra-ui-simple-...
vue el-input输入框el-autocomplete下拉列表样式修改
wangyong_h
10-12 3869
一、根据需求修改自定义样式，最终效果如下图 常规修改样式代码如下，输入框样式已修改； /deep/.el-input__inner:focus { border: 1px solid #1fb1ef; } /deep/.el-input__inner { border: 1px solid #1fb1ef; background: rgba(0, 80, 111, 0.8); border-radius: 18px; height: 30px; .
封装el-autocomplete组件，实现滚动触底翻页
qq_43209807的博客
10-28 1109
通过自定义指令v-autocomplete-scroll 来监听滚动事件，需要注意事件的监听与移除监听。element-ui的 el-autocomplete 组件支持远程搜索输入相关数据，可以翻页，通过监听到滚动事件，判断是否到达底部，然后进行page++ 搜索。要求实现下滑到底部的时候，触发翻页请求，查看更多结果。
element的el-autocomplete组件的使用（模糊匹配、自定义模板、远程搜索）
weixin_41549971的博客
01-17 1682
element的el-autocomplete组件的使用（模糊匹配、自定义模板、远程搜索）
【element】el-autocomplete的常见用法
热门推荐
糯米w的博客
04-28 3万+
详细讲解一下模糊匹配的种种方法,有前端自行匹配以及请求后端接口的匹配,同时包括各种自定义的样式设计,涵盖了基本需求所需,同时配备了源码,相信通过自己的尝试可以更好的理解各种方法的作用. ...
使用 el-autocomplete 改变弹出内容的样式
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
11-18 1469
效果 最初 <el-autocomplete class="my-autocomplete" style="z-index: 1" :maxlength="11" placeholder=""> <template slot-scope="{ item }" class="my
element-ui el-autocomplete设置输入框和下拉框宽度，详细代码
06-07
要设置 `el-autocomplete` 组件的输入框和下拉框的宽度，可以通过以下代码实现： ```html <template> <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" :style="{width: inputWidth + 'px'}" > <template slot-scope="{ item }"> <div class="item">{{ item.value }}</div> </template> </el-autocomplete> </template> <script> export default { data() { return { value: '', inputWidth: 200, // 输入框宽度 }; }, methods: { querySearch(queryString, cb) { // ... }, }, }; </script> ``` 在 `el-autocomplete` 组件中，使用 `:style` 绑定一个对象，对象中的 `width` 属性可以设置输入框的宽度。例如，上面的代码设置输入框宽度为 200 像素。 如果需要设置下拉框的宽度，可以通过 CSS 样式来设置。例如： ```css .el-autocomplete__popper { width: 300px; /* 下拉框宽度 */ } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值