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

已于 2024-03-07 11:55:50 修改
阅读量2.3k 收藏 1
点赞数 2
文章标签： vue.js 前端 javascript elementui
于 2024-03-07 11:55:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52603369/article/details/136529410
版权

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

问题效果图

在这里插入图片描述

Css

.el-select {
   width: 100%;
}

修复效果图

在这里插入图片描述

Element 的Select 选择器根据选项内容自适应宽度
weixin_43829905的博客
11-04 3492
Element 的Select 选择器根据选项内容自适应宽度Element 的Select 选择器根据选项内容自适应宽度 Element 的Select 选择器根据选项内容自适应宽度 效果：选择前 选择后： 上代码： <el-select v-model="value" placeholder="请选择" :style="{width:minWidth+'px'}"> <el-option v-for="item in options" :key="i
el-select 设置宽度自适应上层div
milijiangjun的博客
08-22 4635
在标签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组件的宽度设置
2303_76675983的博客
03-05 737
1.给整个el-form设置 所有的el-form-item都是一样的宽度。2.单独给需要的el-form-item设置。
解决Element UI中el-select下拉框因为选项内容过长导致下拉框宽度显示过长问题
Hi_MrXiao的博客
02-08 1305
在使用el-select下拉框时，当选项的内容过长就会自动撑开下拉框容器，导致下拉框的宽度显示异常，影响页面美观我们更倾向于下拉框的宽度和el-select组件宽度保持一致。
Element-UI中 el-select选择器实现宽度自适应
Tianxiaoxixi的博客
09-29 8155
Element-UI中 el-select选择器实现宽度自适应
el-form-item 内的 el-select如何自适应宽度
Rocky balboa
03-27 3645
el-select中设置固定的值如 style=”width:100px”才有作用。 <el-form-item> <el-select v-model="DataQuery.data" clearable placeholder="请选择" style="width:180px"> <el-option label="实时数据" value="1"/> <el-option label="1小时数据" va
【vue】el-select选择器实现宽度自适应
Qxn530的博客
05-22 2263
el-select选择器实现宽度自适应
el-select实现宽度自适应：
SunPeng的博客
12-09 2811
el-select实现宽度自适应：
el-form自适应
最新发布
04-03
表单项 (`el-form-item`) 和下拉框 (`el-select`) 宽度适配 为了使 `el-select` 能够在其父容器中自动调整宽度，可以通过 CSS 设置 `.el-select` 的样式为 `width: 100%`。这样可以确保它能够完全填充其所在的列宽...
element el-form-item 宽度
02-09
在 Element UI 的表单布局中，通常通过 CSS 类或内联样式来控制 `el-form-item` 或其子组件如 `el-select` 的宽度。直接修改 `el-form-item` 宽度可能不会达到预期效果，因为它的宽度主要由父容器决定。 为了使 `el...
<el-form-item label="零件名称" required prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="ERP_组织号" required prop="erpzzh"> <el-select v-model="ruleForm.erpzzh" multiple placeholder="请选择分公司" @click.native="handleSelectClick" clearable> <el-option v-for="item in ERPzzhData" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item>如何设置宽度一样
03-22
好的，用户现在的问题是关于如何让Element UI中的el-form-item组件内的el-input和el-select的宽度保持一致。用户提供的代码片段中，有两个表单项，分别是零件名称和ERP_组织号，他们希望这两个表单项的输入框和下拉...
个性化Select,长宽可自适应
06-18
非常推荐的网页美化代码，个性化Select,长宽可自适应。
宽度自适应的按钮。button，方便实用
06-01
宽度自适应的按钮。button，方便实用。我试过了。用过都说好。
可以单独设置el-form-item的宽度吗
03-13
嗯，用户问的是是否可以单独设置el-form-item的宽度。首先，我得回忆一下Element UI中的表单组件结构。el-form-item 是包裹表单项的容器，通常包含标签和表单控件，比如输入框、选择器等。 用户可能遇到的情况是，...
el-select实现宽度自适应
m0_59411260的博客
10-28 463
原理：组件使用input标签显示文字，无法更改宽度，可以把该input标签隐藏掉（图1），然后利用prefix插槽显示文字，在对插槽进行样式更改（图二）2.隐藏样式和插槽内文字样式。
Element - el-form-item 内的 el-select如何自适应宽度
bug制造者
09-30 1277
Element - el-form-item 内的 el-select如何自适应宽度
【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”
element中select下拉框如何实现宽度自适应
Shelly Long的博客
08-10 2510
如果使用的是elementUI，style="display: block" 也可以，原因是 elementUI 是 float，elementPlus 是 flex。elementUI 和 elementPlus 都可以直接在el-select上加 style="width: 100%" 解决。OK，这样就又父级元素所在宽度决定了，父级宽度可自定义（一般不用）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值