解决el-select下拉选择框min-width抽风问题

已于 2024-03-27 14:13:04 修改
阅读量524 收藏 10
点赞数 7
文章标签： vue.js 前端 typescript
于 2023-11-27 17:36:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsj521314/article/details/134650642
版权

问题描述:el-select 下拉选择框有一个min-width的属性,正常情况下它会跟着下拉框宽度走,但是抽风起来它会变的其宽无比.

问题图片:

解决思路:使用自己写的样式没效果,给el-select 和 其父元素 或者  el-option 都没效果.再使用官网提供的属性popper-append-to-body 和 popper-class 依旧没有用.最后发现在源码里面它又一个行内样式的min-width导致了以上问题

解决方案:在当前页面手动修改min-width的值,让其恢复正常.

最后看一下效果

小金的白昼梦游指南
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
解决ElementUI下拉框宽度过长问题
qq_19249021的博客
04-23 5886
相信不少人在使用ElementUI的el-select组件都会遇到下拉框宽度过长的问题。以下是解决方案。 <template> <div> // 省略若干无关代码 <el-select @focus = 'setMinWidthEmpty' style = 'width: 200px' // 其他属性 xxxx > <el-option // 其他属性xxx ></el-o.
element下拉框的宽度控制
weixin_60921906的博客
06-21 1761
控制了显示框宽度，有时候下拉的内容宽度控制失败，.custom-speed-wrap {display: inline-block;/deep/.el-input__inner {width: 70px;height: 36px;margin-left: 0px;}/deep/.el-select {width: 70px;}}下拉内容宽度，会自动渲染出min-width:，这个宽度是根据，el-select宽度来的，所以控制该类宽度即可。...
el-select设置下拉的宽度和选项框的宽度
最新发布
qq_38210427的博客
06-06 484
【代码】el-select设置下拉的宽度和选项框的宽度。
【vue】解决element-ui的el-select下拉框中因选项内容太长导致容器宽度过长问题
Hi_MrXiao的博客
12-07 5710
使用el-select下拉组件时，当下拉框中的选项内容很长会自动撑开容器宽度，导致页面效果很不好。如果不想使用组件默认的样式效果（超出的文字隐藏，并且后面添加省略号）属性设置下拉弹出框自定义类型 customDropdown。想使用横向滚动条展示所有内容，可以再加上下面的样式代码。为false：不将下拉弹出框插入至 body 元素。1、首先设置el-select的属性。3、设置下拉框的宽度。
el-select修改宽度没效果
滕青山博客
01-18 2235
第一种方法 不要用el-form包裹住 第二种方法 拉长el-select的输入框 给el-select加上.my-select样式 <style scoped lang="scss"> ::v-deep .el-input__inner { width: 100%!important; } ::v-deep .el-input { width: 100%!important; } ::v-deep .my-select{ display: block!important;;
vue element修改el-select，el-date-picker组件宽度style=“width:XXpx“不生效问题的解决
2301_79406343的博客
02-27 1189
关于vue element修改el-select，el-date-picker组件宽度style="width:XXpx"不生效问题的解决
解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题
shadow__jing的博客
07-26 3465
【问题】： 在elementUI 中，el-dialog的内容比较多，出现滚动条，且内容包含input输入框、select下拉框、时间选择器、cascader级联选择器等，在点开select下拉选择框后并向下滚动鼠标，会出现下拉框跑出el-dialog的区域的情况（有可能离el-dialog的区域很远），造成页面的展示效果混乱。【解决方案】：我们可以在鼠标滚动的时候，让select弹框隐藏，这样就可以解决select 下拉框在el-dialog外面的问题了。在自己封装的el-dialog的组件里。
详解element-ui中el-select的默认选择项问题
10-16
本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个用于创建下拉选择列表的组件。它通常与`el-option`组件配合使用，`el-option`用于定义可选的...
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
eleUi解决表单中el-select选择器比el-input输入框小的问题
ZWP_990527的博客
12-01 2215
解决el-input、el-select和el-date-picker等元素宽度不相同的问题。
elementui el-select 变小+透明
a378113472的博客
04-13 1530
<el-select v-model="value" placeholder="请选择" filterable clearable> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> /..
【vue】el-select选择器实现宽度自适应
Qxn530的博客
05-22 932
el-select选择器实现宽度自适应
Vue 通过条件变化，控制el-select的选中值变化
qq_35139897的博客
03-03 3773
业务描述：根据时间条件查询记录，但是数据分表，月类型select选择，默认是当前一个月的数据，如果日期是历史的数据查询，得选择月份类型是3个月，才能组合表查询。 要求：根据日期变化，设置select的选择值变化。 查了很多，都是 select的值变化后执行的操作，发现一个 设置值的方法，借鉴下，测试可以用，实现如下 直接代码 <template> <div class="mod-config"> <el-form :inline="true" :model
select2的宽度样式问题
zhen3368的博客
12-18 5982
转载自 select2的宽度样式问题 作者 姜瑞涛 根据select2的官方文档做练习，做的是 basic usage这个最简单的例子。做这个练习的时候发现，浏览器展示下拉选的样式不正常，宽度非常窄，也正常使用了select2自身CSS文件和jquery，不知道是什么原因导致的该问题。如下图 select2的宽度样式问题-姜瑞涛 下面是代码 Document ...
el-select 多选框如何自适应宽度，不换行
weixin_57182748的博客
05-05 5685
el-select下拉框的宽度自适应，基于element框架的select进行重新处理，不改动源码，只调整部分样式
讲述下拉框自己的故事——解决html的select(下拉框)宽度问题
【头号恶魔】
09-04 1641
我们经常要使用select ，但select的大小会随着内容的大小而变化。很烦人啊。 网上有人说用层来替代，这个方法是可行的，就是觉得有点麻烦。 本人喜欢投机取巧。。呵呵 所以想了个懒办法--用脚本控制 当select被点击（onclick或者onchange）的时候调用脚本函数改变这个select的width值 当select失去焦点（onblur）的时候再一次调用脚本恢复这个sele...
关于el-input和el-select宽度不一致问题解决
jieyucx的博客
09-04 3719
这种情况下再给select加上width：100%，达不到预期的效果。
el-select下拉选择多选去掉输入框
09-13
你可以通过设置 `el-select` 组件的 `multiple` 属性为 `true` 来实现多选功能。同时，通过设置 `filter` 属性为 `false` 可以去掉输入框。下面是一个示例代码： ```html <el-select multiple filterable=...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值