快捷導(dǎo)航

element-ui中el-form-item內(nèi)的el-select該如何自適應(yīng)寬度

更新時(shí)間：2022年11月16日 10:16:11 作者：必勝課

自從用了element-ui,確實(shí)好用,該有的組件都有,但是組件間的樣式都固定好了,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-form-item內(nèi)的el-select該如何自適應(yīng)寬度的相關(guān)資料,需要的朋友可以參考下

問(wèn)題：

想讓el-select自適應(yīng)寬度，即 label寬度 + el-select寬度可以填滿(mǎn)一行，想要實(shí)現(xiàn)這樣的效果

詳細(xì)描述：

項(xiàng)目中的代碼如下，給 el-select 設(shè)置了 style=“width:100%” 沒(méi)有作用，不論布局是變大變小，el-select 的寬度都不會(huì)有變化，就像下圖所示

我只有在el-select中設(shè)置固定的值如 style="width:100px"才有作用。下面是我的代碼，不知道是不是我對(duì)width的設(shè)置方法有錯(cuò)

<el-form :inline=“true”
       :model="searchInfo"
       label-width="80px"
       label-position='left'
       size="mini">
    <el-row>
      <el-col :span="12">
        <!-- TODO:設(shè)置select與label同行，select自動(dòng)填充剩余寬度 -->
        <el-form-item label="出發(fā)地"
                      prop="start">
          <el-select v-model="searchInfo.start"
                     style="width:100%"
                     placeholder="選擇出發(fā)地">
            <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="出發(fā)地點(diǎn)"
                      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框起來(lái)，使用類(lèi)似于這樣的方法

<div style="display:inline-block">
<div style="display:inline-block">

但是，el-form-item 是 el-select的父組件沒(méi)辦法這樣做。。

網(wǎng)上搜索不到其他方法，大佬們能順便告訴我一下，這種問(wèn)題應(yīng)該怎么進(jìn)行搜索嗎？

回答：

.el-form .el-select{
  width: 100%;
}

套上這個(gè)樣式即可

回答：

很簡(jiǎn)單，在el-select標(biāo)簽內(nèi)加上樣式 display:block; 即可

回答：

可以寫(xiě)樣式覆蓋，設(shè)置width：100%

也可以定義一個(gè)變量selectWidth
selectWidth = （獲取區(qū)域?qū)挾龋? ‘px’
:style=“width:selectWidth”

回答：

很簡(jiǎn)單，在el-select標(biāo)簽內(nèi)加上樣式 display:block; 即可

<el-select v-model="formInfo.notice_hours" placeholder="請(qǐng)選擇通知用戶(hù)" style="display: block;"></el-select>

回答：

可以寫(xiě)樣式覆蓋，設(shè)置width：100%
也可以定義一個(gè)變量selectWidth
selectWidth = （獲取區(qū)域?qū)挾龋? ‘px’
:style=“width:selectWidth”

回答：

Element-UI 的 el-select 使用的其實(shí)是 input 標(biāo)簽 , 而 input 標(biāo)簽在瀏覽器中存在一個(gè)默認(rèn)的寬度 , 大約是100px

(不同的瀏覽器表現(xiàn)不同) ;

可以通過(guò)js來(lái)設(shè)置 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);

總結(jié)

到此這篇關(guān)于element-ui中el-form-item內(nèi)的el-select該如何自適應(yīng)寬度的文章就介紹到這了,更多相關(guān)el-form-item el-select自適應(yīng)寬度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: