让el-option和el-select宽度保持一致

已于 2023-08-17 10:31:28 修改
阅读量2.7k 收藏
点赞数
分类专栏： vue2实战记录 文章标签： javascript 前端 vue.js
于 2023-04-04 19:07:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37635012/article/details/129959761
版权
本文介绍了如何使elementUI的el-option组件的宽度与el-select保持一致。当el-option无法达到100%宽度时，提供了解决方案：在DOM加载完成后，获取el-select的宽度并应用到el-option上。同时，提供了适用于Vue3和Vue2的不同写法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

有时候我们用elementUI时会发现，el-option宽度总是达不到100%，就算你给它设置了宽100%一样不生效。如下是最终的效果图：
请添加图片描述
原理：DOM挂载完毕后，获取 el-selcet宽度，并赋值给 el-option 。
如果 el-select 宽度不确定，可以在 focus 时获取 el-select 宽度，赋值给 el-option。
下面是Vue3写法：

<el-select
           v-model="columnContentList"
           placeholder="请输入关键词"
           r
了解本专栏 订阅专栏 解锁全文 超级会员免费看
大屏项目，在全屏和非全屏的情况下，el-select和el-option一直等宽
weixin_44029605的博客
07-25 575
大屏项目，在全屏和非全屏的情况下，el-select和el-option一直等宽
el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇
草巾冒小子的博客
04-10 8万+
element-UI 下拉框el-select组件el-option的v-for问题 我的代码： &lt;template&gt; &lt;div id="htmlWrap"&gt; &lt;!--header--&gt; &lt;div class="bg545C64"&gt; &lt;NavMenuVue&gt;&lt;/NavMenuVue&a
如何控制el-options的下拉宽度
Xiao022353的博客
12-26 332
即可 ，width随便设置一个值 ，注意一定要是px或者其他，不可以是%(我用%失效)注意不要放在 scoped中 要单独在写一个 style标签就好了。
el-select实现与el-option同宽度，且移动端适应自动对齐
一茗道人 ~~ ~ 阿亮-的博客
01-10 2218
el-select实现与el-option同宽度，且移动端适应自动对齐
设置el-option的宽度和el-select 宽度相同，选项内容超出显示滚动条
吴冬雪的博客
03-16 8714
<!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> </style> <!-- globe css --> <style lang="scss"> .el-select-dropdown{ ...
关于el-input和el-select宽度不一致问题解决
jieyucx的博客
09-04 5131
这种情况下再给select加上width：100%，达不到预期的效果。
element ui的el-select框和选项框的宽度设置问题
热门推荐
Beam
04-30 8万+
最终效果图 有数据时： 无数据时： 常见情况-有数据时 代码： <el-select v-model="devType" style="width:100%"> <el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value"></el-op...
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-select组件通常用于创建一个可选列表，用户可以从中选择一个或多个选项。当el-select的选项列表（el-...
el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇_el-option v-for
2401_85013615的博客
05-14 837
【代码】el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇_el-option v-for。
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时超出元素区域，以及Cascader级联选择器滚动超出其容器。这两个问题都会影响用户体验。本文将详细探讨这两个问题的原因及...
解决Element UI中el-select下拉框因为选项内容过长导致下拉框宽度显示过长问题
最新发布
Hi_MrXiao的博客
02-08 1541
在使用el-select下拉框时，当选项的内容过长就会自动撑开下拉框容器，导致下拉框的宽度显示异常，影响页面美观我们更倾向于下拉框的宽度和el-select组件宽度保持一致。
【vue】el-select选择器实现宽度自适应
Qxn530的博客
05-22 2289
el-select选择器实现宽度自适应
element-ui中select和input的宽度不一致
weixin_55582221的博客
02-17 4086
今天写页面的时候用的是element-ui组件，其中用到了form表单，在页面中显示的效果是select组件要比input组件要长一点，美观度就有点不太好，效果如下图所示： 于是就想让input和select的宽度一致，首先找到了一种方法说是修改select的宽度，代码如下： <el-form-item label="所在国家:" prop="title"> <el-select v-model="ruleForm.county" placeholder="请选择国家" st
el-input和el-select的框的宽度设置成一致的。
wlijun_0808的博客
06-01 1933
el-select和el-input的宽度一致
elementui 输入框下拉面板宽度跟随输入框宽度
u010328533的博客
01-05 2325
elementui 输入框下拉面板宽度跟随输入框宽度 <el-form-item label="业务系统" prop="businessSystemId" class="select-mul" v-else> <el-select v-model="projectForm.businessSystemIdList" placeholder="请选择业务系统"
el-select 和 el-option长度和样式修改
m0_61601708的博客
11-27 2418
【代码】el-select 和 el-option长度和样式修改。
element select自定义模板 options span宽度设置
five_s的博客
11-10 466
主要是span文本过长，到时下拉框被撑开了。
element中select下拉框如何实现宽度自适应
weixin_57182748的博客
11-05 1万+
然后使用这个内容代替原来的选择框默认内容，覆盖掉原来的样式，达到自适应的母的。测试提了一个优化需求，使用下拉框选择时 ，根据选择的内容实现自适应的效果;如果使用element自带的select的选择器模块，它默认的select选择框的宽度是固定的。1.不能给输入框直接设置固定宽度，考虑动态获取选择内容的宽度，然后再赋值给选择框的宽度样式，没有这样操作，感觉会比较麻烦，刷新的话会存在问题。那么我们要做的效果是这样的，select选择框的宽度随着你选择的内容变化而自适应的。给用户的操作感觉会比较好。
Element-UI中 el-select选择器实现宽度自适应
Tianxiaoxixi的博客
09-29 8192
Element-UI中 el-select选择器实现宽度自适应
el-option如何设置为el-select的默认值
06-26
在Element UI中，`el-option` 是 `el-select` 组件中的选项项。如果你想设置一个 `el-select` 的默认值，你可以这样做： 1. 首先，在你的 `el-option` 中定义一个对象，包含 `value` 和 `label` 属性，`value` 通常表示数据的唯一标识，`label` 是用户看到的显示文本。 ```html <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label" ></el-option> ``` 这里，`options` 是你的数据数组，比如： ```javascript data() { return { options: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'defaultOption', label: '默认选项' } // 假设这是默认值 ] } } ``` 2. 在 `el-select` 标签上，你可以设置 `value` 属性为默认选项的 `value` 值： ```html <el-select v-model="selectedOption"> <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label" ></el-option> </el-select> ``` 3. 当 `v-model` 的值匹配 `options` 中的某个 `value` 时，那个选项就会被选中，这就是默认值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值