el-select 设置宽度 没效果

最新推荐文章于 2025-04-23 21:11:41 发布
最新推荐文章于 2025-04-23 21:11:41 发布
阅读量461 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/woniuyibuyibu/article/details/145615301
版权

想实现下面的效果，一行两个，充满el-col='12' 

然后设置了 width=100%,当时一直没有效果

解决原因：

el-form 添加了 inline 

所以删除inline属性 即可

让el-option和el-select宽度保持一致
qq_37635012的博客
04-04 2751
有时候我们用elementUI时会发现，el-option宽度总是达不到100%，就算你给它设置了宽100%一样不生效。如果 el-select 宽度不确定，可以在 focus 时获取 el-select 宽度，赋值给 el-option。原理：DOM挂载完毕后，获取 el-selcet宽度，并赋值给 el-option。
el-select 设置宽度自适应上层div
milijiangjun的博客
08-22 4641
在标签el-select中，添加style=“display:block;” 宽度将由上层div宽度决定 display: grid; grid-template-columns: minmax(auto,400px); 上层div配合grid布局 达到select选择框最大宽度400px，自适应小屏幕的效果 <el-col :span="8"> <el-form-item label="供应商名" prop="supplier" :class="{ 'is-requ
【element-ui】el-form-item 内的 el-select如何自适应宽度
weixin_48583165的博客
04-27 1万+
问题：想让el-select自适应宽度，即 label宽度 + el-select宽度可以填满一行，想要实现这样的效果 详细描述：项目中的代码如下，给 el-select 设置了 style=“width:100%” 没有作用，不论布局是变大变小，el-select 的宽度都不会有变化，就像下图所示 我只有在el-select中设置固定的值如 style="width:100px"才有作用。下面是我的代码，不知道是不是我对width的设置方法有错 <el-form :inline=“true”
vue element修改el-select，el-date-picker组件宽度style=“width:XXpx“不生效问题的解决
2301_79406343的博客
02-27 2953
关于vue element修改el-select，el-date-picker组件宽度style="width:XXpx"不生效问题的解决
[element-plus的使用] el-form设置inline属性时el-select宽度丢失
最新发布
m0_73440809的博客
04-23 224
el-form设置inline属性时el-select宽度丢失。
el-select修改宽度没效果
hello world
01-18 2731
第一种方法 不要用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控件的长度 style=“width:XXpx“不生效的问题
a83370892的博客
02-19 1万+
问题：想要修改一个代码如下，里面的select的长度，然后单纯地通过设置style="width:200px"发现不生效，实际控件可触控区域以及占据区域确实变长了，但是视觉上没有变化。 <template> <div class="workreport-tallyorg"> <div style="margin-left:20px"> <span>审批状态</span> ...
解决el-select下拉选择框min-width抽风问题
jsj521314的博客
11-27 699
解决思路:使用自己写的样式没效果,给el-select 和 其父元素 或者 el-option 都没效果.再使用官网提供的属性popper-append-to-body 和 popper-class 依旧没有用.最后发现在源码里面它又一个行内样式的min-width导致了以上问题。问题描述:el-select 下拉选择框有一个min-width的属性,正常情况下它会跟着下拉框宽度走,但是抽风起来它会变的其宽无比.解决方案:在当前页面手动修改min-width的值,让其恢复正常.
el-form-item内的el-select如何自适应宽度
03-07 2382
最近在使用`element-ui`做`后台管理`的时候，有个需求是在`弹窗组件`里面，添加一个`el-select下拉框选项`，但是给`el-select`设置的宽度`无法自适应`，原因很简单，我们不需要设置固定宽度，设置`百分比就行了`，让他继承父元素，撑开自己就行 我们先看问题效果图；
vue element-ui修改form表单的el-input的宽度，el-select的宽度
热门推荐
新林的博客
12-15 5万+
自从用了element-ui,确实好用，该有的组件都有，但是组件间的样式都固定好了，有时候像form表单这样，页面的input、select等宽度不一定会是一样的，可能有些长，有些短，这时候改变这些控件的宽度就有点麻烦了。 很多都说在el-input里面加width,但是效果不好，简单总结一下这个，利用css的样式优先级覆盖原来elment-ui里面的控件样式
el-select根据内容实现宽度自适应
qq_52132550的博客
06-08 1536
'双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶''蚵仔煎蚵仔煎蚵仔煎'
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
总的来说，解决el-select选择器无法显示选中内容的问题，通常需要从数据绑定、组件使用、样式设置等多个角度进行综合考虑。通过上述方法逐一排查并修复问题，一般能够找到导致问题的根本原因，并最终解决无法显示...
el-select设置宽度
06-10
你可以在 el-select 组件上设置一个固定的宽度，或者使用 CSS 样式来控制 el-select 的宽度。以下是两种方法的示例： 1. 设置固定宽度 你可以在 el-select 组件上添加一个 style 属性，设置一个固定的宽度，例如：...
el-select修改宽度问题解决方案
smallteddy.blog.youkuaiyun.com
01-06 2万+
1、当placeholder过长时 1、样式 2、代码 <el-select remote filterable clearable placeholder="请输入发布单元英文名(支持模糊搜索)" :remote-method="remoteMethod"> <el-option v-for="v in items" :key="v.id" :value="v.id" :label="v.name" /> </el-select> 2、网上其他人的解决方案
el-select设置下拉的宽度和选项框的宽度
qq_38210427的博客
06-06 2543
【代码】el-select设置下拉的宽度和选项框的宽度。
解决Element UI中el-select下拉框因为选项内容过长导致下拉框宽度显示过长问题
Hi_MrXiao的博客
02-08 1729
在使用el-select下拉框时，当选项的内容过长就会自动撑开下拉框容器，导致下拉框的宽度显示异常，影响页面美观我们更倾向于下拉框的宽度和el-select组件宽度保持一致。
【element-plus使用】el-select自定义样式、下拉框选项过长等问题解决
记录
11-29 1万+
参考代码：选项的超出部分就会变成...。如果要自定义下拉框的宽度，则可以参考如下代码实现<el-option<style></style>选项的超出部分就会变成...。参考（里面还有种方法是用横向滚动条，但感觉用户体验会不太好,pass）补充：如果不希望选项超出部分变成…，直接都完整展示每个选项。可以参考下面的写法：（我还没试过；是群里uu提供的）
ElementUI el-select 宽度怎样能100%
半夏_2021的博客
05-21 2630
ElementUI el-select 宽度怎样能100%
关于el-input和el-select宽度不一致问题解决
jieyucx的博客
09-04 5168
这种情况下再给select加上width：100%，达不到预期的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值