问题:想让el-select自适应宽度,即 label宽度 + el-select宽度可以填满一行,想要实现这样的效果
详细描述:项目中的代码如下,给 el-select 设置了 style=“width:100%” 没有作用,不论布局是变大变小,el-select 的宽度都不会有变化,就像下图所示
我只有在el-select中设置固定的值如 style="width:100px"才有作用。下面是我的代码,不知道是不是我对width的设置方法有错
<el-form :inline=“true”
:model="searchInfo"
label-width="80px"
label-position='left'
size="mini">
<el-row>
<el-col :span="12">
<!-- TODO:设置select与label同行,select自动填充剩余宽度 -->
<el-form-item label="出发地"
prop="start">
<el-select v-model="searchInfo.start"
style="width:100%"
placeholder="选择出发地">
<el-option v-for="item in startOptions"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出发地点"
prop="start">
<el-select v-model="searchInfo.end"
style="width:100%"
placeholder="选择目的地">
<el-option v-for="item in endOptions"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
想用div将el-select框起来,使用类似于这样的方法
```java
<div style="display:inline-block">
<div style="display:inline-block">
但是,el-form-item 是 el-select的父组件没办法这样做。。
网上搜索不到其他方法,大佬们能顺便告诉我一下,这种问题应该怎么进行搜索吗?
回答:
.el-form .el-select{
width: 100%;
}
套上这个样式即可
回答:
很简单,在el-select标签内加上样式 display:block; 即可
图片描述
回答:
可以写样式覆盖,设置width:100%
也可以定义一个变量selectWidth
selectWidth = (获取区域宽度)+ ‘px’
:style=“width:selectWidth”
回答:
很简单,在el-select标签内加上样式 display:block; 即可
<el-select v-model="formInfo.notice_hours" placeholder="请选择通知用户" style="display: block;"></el-select>
回答:
可以写样式覆盖,设置width:100%
也可以定义一个变量selectWidth
selectWidth = (获取区域宽度)+ ‘px’
:style=“width:selectWidth”
回答:
Element-UI 的 el-select 使用的其实是 input 标签 , 而 input 标签在浏览器中存在一个默认的宽度 , 大约是
100px
(不同的浏览器表现不同) ;
可以通过js来设置 input 的 width 为 auto (hack方法) :
```javascript
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]')
// event handler
.keyup(resizeInput)
// resize on page load
.each(resizeInput);