el-select 中 filterable(可搜索) multiple(多选)同时使用时，样式显示问题

最新推荐文章于 2024-06-19 22:00:00 发布
最新推荐文章于 2024-06-19 22:00:00 发布
阅读量1.3k 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42947973/article/details/127809172
版权

el-select filterable multiple CSS样式 样式覆盖
关键词由CSDN通过智能技术生成

问题背景：在el-select组件中同时使用filterable(可搜索)和multiple(多选)两个参数时，样式显示有问题。

解决方案：在css中加入以下样式覆盖

/deep/ .el-select__input.is-small {
    border: 0px solid #d9d9d9;
  }

 

森源香槟
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
react antd select 筛选报错，搜索报错
tian6632的博客
02-14 331
类型“number”上不存在属性“toLowerCase” 上述代码中因为ts报错,内容如下原因分析options中的列表对象没有正确进行。
ElementUI的 el-select 多选的样式自我调整
xinyuandu的博客
04-15 1万+
ElementUI的 el-select 多选的样式自我调整 elementUI 中的el-select组件，它的官方提供的多选样式提供了两种，一种是展示每一条，其次是展示一条，后面提示总数，但是昨天遇到一个需求是展示一行，多余的隐藏，之后显示总数，我是在element的基础上进行了修改，具体的就不多说了，直接上下代码,数据什么的就不提供了，这里是我修改了的核心内容： <template&g...
ElementUI el-select 改变高度
最新发布
HDdgut的博客
06-19 416
给el-select加一个自定义类，这样不会影响其他的el-select，或是scoped，但是需要加/deep/修改 ElementUI el-select 高度，同时需要修改内部样式，否则下拉箭头会发生偏移。
vue3 Element Plus select 同时使用filterable，multiple交互问题
Alice_czy的博客
06-05 1345
解决filterable，multiple同时使用交互问题
select标签添加multiple属性后，页面呈现的样式发生改变，如何修改
积累点滴、持续总结、进而成长
03-13 9499
select标签当添加multiple属性后，是指明该下拉框可以进行多选，但是添加上multiple属性后，页面的呈现是样式会发生改变 也就是 页面会将所有的下拉框的值全部展示出来 此时，需要在select标签的内部再次添加属性：size=“” 里面的数值根据select中有几个值而定 这样基本样式可以改变 进行回填的时候，数值也不会再次发生改变 代码如下： select id="
el-select 支持全选，多选，自定义搜索全选
m0_55558279的博客
06-21 950
【代码】【无标题】
记录 ＜el-select 多选 配合filterable 进行远程搜索
zcl520sy的博客
09-28 1217
filterable：是否可搜索 remote：是否为远程搜索 remote-method：远程搜索方法 remove-tag：多选模式下移除tag时触发 click.native：下拉数据点击事件能获取这个对象的所以属性 query是默认参数-->(输入的字符) 主要利用 filterable --remote---- remote-method 这三个属性实现远程搜索。 用filterable可输入属性，在下拉框输入字符，在用remote-method
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
- `filterable`、`clearable`、`remote`、`multiple`等属性分别控制筛选、清除、远程搜索和多选功能。 - `:remote-method`接收一个方法，当用户输入时触发，用于执行远程搜索请求。 - `@change`、`@clear`、`@...
详解element-ui中el-select的默认选择项问题
10-16
此外，`el-select`还有一些其他特性，如多选模式（通过设置`multiple`属性）、远程搜索（通过`remote`和`filterable`属性）等，它们也可以影响默认选择项的处理。例如，在多选模式下，`v-model`应绑定到一个数组，...
el-select数据过多懒加载的解决(loadmore)
01-19
el-select数据过多处理方式 在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式. 远程搜索 组件提供了远程搜索方式, 也就是按照你输入... v-el-select-loadmore=lo
Vue Element 分组+多选+可搜索Select选择器实现示例
10-18
在本示例中，我们将深入探讨如何将这些特性结合起来，实现一个完整的分组+多选+可搜索的`Select`选择器。 首先，我们需要了解数据源的格式。在Vue应用中，`selectList`是一个包含多个对象的数组，每个对象都有`name...
element 搜索匹配_elementUI最新版的el-select使用filterable无效无法匹配正确搜索结果的Bug解决办法...
weixin_39790102的博客
12-19 1039
Bug描述：今天做开发时遇到一个elementUI存在的bug。当el-select使用filterable功能搜索时，如果你恰巧使用的是微软拼音输入法，那么你有可能会遇到搜索结果和输入的值不匹配，如下图：我输入的是黄金，结果却显示有双皮蛋，龙须面。复现办法：打开https://element.eleme.cn/#/zh-CN/component/select定位到【可以利用搜索功能快速查找选项】...
ElementUI中的el-select中multiple多选回显数据后没法编辑
程序员二胖
09-01 4112
场景：在编辑数据时，使用v-model绑定 el-select多选，但无法进行编辑、删除，这是因为由于一些嵌套特别深的数据，导致数据更新了，但是页面却没有重新渲染，需要使用this.$forceUpdate()迫使 Vue 实例重新渲染。在el-select 中使用@change="$forceUpdate()" <el-select v-model="formData.tagsArray" placeholder="请选择标签" multiple clearable :style="{width:
vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl
weixin_44867717的博客
09-06 2602
【代码】vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl。
el-select组件远程搜索时，单选状态下无法触发remote-method远程搜索功能——基础积累
热门推荐
yehaocheng520的博客
11-16 1万+
今天在做后台管理系统时，需要用到select组件的远程搜索功能： element-ui官网上是有相应的远程搜索的功能的： 具体思路就是：select组件支持输入功能，在输入关键字后，触发remote-method方法，然后根据关键字调取接口，获取数据，然后再展示到下拉框中。 官网上给出的是多选的select组件，经过单选和多选组件的对比，发现，多选的组件完全没有问题。 针对上面的三点，多选时，都可以满足，都可以触发remote-method远程搜索功能。 但是在单选时，就出现了问题：上图中拿到关键字的
Element-UI el-select 多选菜单换行撑开
金乌的博客
09-22 1455
Element-UI el-select 多选菜单换行撑开显示破坏整体样式。若出现滚动条样式不好看，可以更改样式，和elementui保持一致。
【element-ui】el-select multiple多选，表单校验问题解决方法
小墨鱼的前端问题录
02-28 2004
在项目开发过程中发现，el-select设置了multiple支持多选属性之后，el-select赋值之后，表单校验不通过。、prop属性、rules校验是否正确，这里注意el-select的rules校验的trigger应该是change。注意rule中验证方式应该是“change” @change="vulTypeChange()"如果以上都没问题，那么还有一个原因就是：嵌套太深，导致form检测不到ruleForm的变化。1、添加form表单:rule方式验证，并且给下拉框添加change函数。
使用Vue+ElementUI的下拉菜单多选时，文本内容过长导致显示溢出自动换行
weixin_43768573的博客
11-21 4081
使用Vue+ElementUI的下拉菜单多选时，文本内容过长导致显示溢出自动换行
elementui中el-select实时搜索渲染下拉框（可多选对象）
ss_Tina的博客
04-28 2415
el-select多选，实时输入后调用后端模糊查询接口，赋值在下拉选项里面。
el-select下拉多选并可编辑
09-14
在 `el-select` 中实现下拉多选并可编辑的功能，你可以使用 `multiple` 和 `filterable` 属性结合使用。 首先，在 `el-select` 上设置 `multiple` 属性，这将允许你选择多个选项。然后，设置 `filterable` 属性，这将添加一个可编辑的输入框。 以下是一个示例代码： ```html <template> <div> <el-select v-model="selectedOptions" multiple filterable placeholder="请选择" style="width: 200px" > <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" ></el-option> </el-select> </div> </template> <script> export default { data() { return { options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, // 其他选项... ], selectedOptions: [], }; }, }; </script> ``` 在这个示例中，`options` 数组包含了所有可选的选项。`selectedOptions` 是一个用于存储用户选择的选项的数组。 通过设置 `multiple` 属性，用户可以选择多个选项。通过设置 `filterable` 属性，用户可以在下拉列表中输入文本进行搜索和编辑。 希望这个示例能够帮助到你！如果你还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

森源香槟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值