el-form-item组件包裹el-select组件时el-option在选择之后宽度被影响问题

最新推荐文章于 2025-03-05 10:28:47 发布

m0_47177307

最新推荐文章于 2025-03-05 10:28:47 发布

阅读量374

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_47177307/article/details/137145699

版权

el-form-item组件包裹el-select组件时el-option在选择之后宽度被影响问题，

没有选择时宽度是一样的，

选择了之后宽度被拉长明显不协调，这里是封装了一个组件，在其他地方引用的时候没有问题，不会被拉长，看了下这里的引入是被el-form-item包裹的，应该是受el-form-item的样式影响了，

通过f12查看，翻阅了下官方文档，将 el-form-item的宽度label-width设为autoj就好。

现在选择不会被拉长宽度

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

m0_47177307

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

qq_37635012的博客

04-04

2727

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

el-form内el-select与el-input纵向不对齐的问题

skysys的研究小屋

02-07

5324

解决方法 <el-form :model="form" label-width="100px" size="small"> <el-col :span="8"> <el-form-item label="test1"> <el-input v-model="form.value1" autocomplete="off"></el-input> </el-form-item> </el-c

1 条评论您还未登录，请先登录后发表或查看评论

el-form-item内的el-select如何自适应宽度

03-07

2334

最近在使用`element-ui`做`后台管理`的时候，有个需求是在`弹窗组件`里面，添加一个`el-select下拉框选项`，但是给`el-select`设置的宽度`无法自适应`，原因很简单，我们不需要设置固定宽度，设置`百分比就行了`，让他继承父元素，撑开自己就行我们先看问题效果图；

element-ui 表单el-form组件的宽度设置

热门推荐

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...

Vue中el-form标签中的自定义el-select下拉框标签功能

10-15

`el-select` 是`el-form` 中常用的组件，用于创建下拉选择框，用户可以在预设的选项中进行选择。在某些场景下，我们可能需要自定义`el-select` 的下拉框标签，以满足特定的需求。本文将详细介绍如何在`el-form` 中...

for循环多个el-form-item el-select组件，公用一份options数据，每个el-select组件选中后其他el-select组件禁用选中option项

weixin_62372204的博客

06-14

360

【代码】for循环多个el-form-item el-select组件，公用一份options数据，每个el-select组件选中后其他el-select组件禁用选中option项。

el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇

草巾冒小子的博客

04-10

8万+

element-UI 下拉框el-select组件el-option的v-for问题我的代码： <template> <div id="htmlWrap">  <div class="bg545C64"> <NavMenuVue></NavMenuVue&a

el-select实现与el-option同宽度，且移动端适应自动对齐

一茗道人 ~~ ~ 阿亮-的博客

01-10

2209

el-select实现与el-option同宽度，且移动端适应自动对齐

表单中el-select、el-date-picker和el-input的长度不一致解决办法

lovoo的博客

03-02

5324

当它们一起使用时，一般select长度是默认的，会比input短，只需要设置其宽度是100%即可。同理，el-date-picker也是类似的，但有所差别。然后设置其宽度是100%

el-select设置下拉的宽度和选项框的宽度

qq_38210427的博客

06-06

2438

【代码】el-select设置下拉的宽度和选项框的宽度。

element el-form-item el-input宽度设置

日光之下的博客

06-01

7440

0 环境系统环境：win10 1 发现问题为el-input设置label-width="100px"不生效 2 解决问题 1 为当前页面所有el-input设置相同宽度 .el-input { width: 自定义宽带; }

vue+element：el-select和el-option组件和v-for语法，实现下拉列表的数据填充，并且点击下拉列表数据后，另一个表单数据的自动填充

baidu_39557593的博客

04-13

1万+

1.第一个下拉列表，效果展示 2.第二个下拉列表，效果展示 3.先点击第一个下拉列表，然后第二个下拉列表自动填充，效果展示 4.js请求，后端接口，需要传递的数据格式，对象数组——appointmentUnitRecord_options1： [ {"label": "培训教室","value": "教学"}, {"label": "考试大厅", "value": "考试" }, {"label": "共享自习室", "value": "培训" }, {"lab...

如何解决在项目中使用elementUI组件时需要修改样式的问题之form表单select宽度

weixin_48798604的博客

09-05

1929

结果又发现虽然el-select的宽度设置为了120px，但是.el-input的宽度依然是220px，并没有改变。在项目中遇到此结构的elementUI框架的使用时，有时会出现宽度设置不上的问题。如图中我们已经给到了el-form-item标签一个宽度的style，但是网页中仍然不显示我们设置的样式。当然也可以使用scoped CSS。

vue2 el-form表单（下拉框单选（多选框的样式））

weixin_60906876的博客

03-01

1292

【代码】vue2 el-form表单（下拉框单选（多选框的样式））

elementUI，el-select下拉选项最后一项内容高度不撑开的问题

sven_chen93的博客

02-07

3317

最近测试在点开下拉框的时候，发现下拉框最后一项展示不全的问题，我后面看了下，觉得是element的问题，如下图所示：后面发现是高度渲染少了17px，后面相加类名总是加不上，查找blog和官方文档发现可以给el-select添加类名的属性：popper-class 在这个class下把这个固定的高度加上17px即可。 <el-select popper-class="modifyStyle"> <el-option v-for="item in options" :key="ite

element el-form-item 宽度

02-09

### 设置 Element UI 中 `el-form-item` 组件的宽度在 Element UI 的表单布局中，通常通过 CSS 类或内联样式来控制 `el-form-item` 或其子组件如 `el-select` 的宽度。直接修改 `el-form-item` 宽度可能不会达到预期效果，因为它的宽度主要由父容器决定。为了使 `el-select` 自适应宽度，可以考虑以下几种方式： #### 方法一：使用栅格系统利用 Element UI 提供的栅格系统（Grid System），可以通过设置列宽来自定义控件的显示宽度。这种方式更加灵活且响应式友好。 ```html <template> <el-row :gutter="20"> <el-col :span="8">  <el-form-item label="Select Item"> <el-select v-model="value" placeholder="请选择"> <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> </el-row> </template> <script> export default { data() { return { value: '', options: [ { value: 'option1', label: 'Option One' }, { value: 'option2', label: 'Option Two' } ] }; } }; </script> ``` #### 方法二：应用自定义类名并编写CSS规则当需要更精确地控制特定实例时，可以在模板中给目标元素添加唯一 class 名字，在外部引入额外的样式文件或者 `<style scoped>` 来指定该选择器的具体尺寸。 ```css /* 在全局或局部范围内 */ .custom-width .el-input__inner, .custom-width .el-select { width: 100% !important; /* 使用重要声明确保优先级 */ } ``` ```html  <div class="custom-width"> <el-form-item label="Custom Width Select"> <el-select v-model="value" placeholder="请选择"></el-select> </el-form-item> </div> ``` 上述两种方案都可以有效解决 `el-select` 控件无法自动填充整个可用空间的问题[^2]。