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

目录

• 问题：
• 详细描述：
• 总结

问题：

想让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框起来，使用类似于这样的方法

<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方法) :

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);

总结

到此这篇关于element-ui中el-form-item内的el-select该如何自适应宽度的文章就介绍到这了,更多相关el-form-item el-select自适应宽度内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！