【element-ui】el-form-item 内的 el-select如何自适应宽度

问题:想让el-select自适应宽度,即 label宽度 + el-select宽度可以填满一行,想要实现这样的效果
clipboard.png

详细描述:项目中的代码如下,给 el-select 设置了 style=“width:100%” 没有作用,不论布局是变大变小,el-select 的宽度都不会有变化,就像下图所示

clipboard.png

我只有在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);
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值