element修改el-select長(zhǎng)度style=“width:XXpx“不生效

問(wèn)題

想要修改一個(gè)代碼如下，里面的select的長(zhǎng)度，然后單純地通過(guò)設(shè)置style="width:200px"發(fā)現(xiàn)不生效，實(shí)際控件可觸控區(qū)域以及占據(jù)區(qū)域確實(shí)變長(zhǎng)了，但是視覺(jué)上沒(méi)有變化。

<template>
? ? <div class="formHeader">
? ? ? ? ? ? <div style="margin-left:20px">
? ? ? ? ? ? ? ? ? ? <span>選項(xiàng)：</span>
? ? ? ? ? ? ? ? ? ? <el-select v-model="form.selectValue" placeholder="請(qǐng)選擇" style="width:200px">
? ? ? ? ? ? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-for="item in selectOption"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :label="item.label"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :value="item.value">
? ? ? ? ? ? ? ? ? ? ? ? </el-option>
? ? ? ? ? ? ? ? ? ? </el-select>
? ? ? ? ? ? ?</div>
? ? </div>
</template>

.formHeader .el-input {
? ? border-color: #409EFF;
? ? width: 150px;
}

原因

Element-UI 的 el-select （el-cascader也是）使用的其實(shí)是 input 標(biāo)簽 , 而 input 標(biāo)簽在瀏覽器中存在一個(gè)默認(rèn)的寬度 , 大約是 100px (不同的瀏覽器表現(xiàn)不同) 。

而如上圖所示，我設(shè)置了el-input的寬度為150px，所以在底層，使用的input還是150px。

解決方法

設(shè)置如下樣式即可：

? ? .fromHeader .el-select .el-input {
? ? ? ? border-color: #409EFF;
? ? ? ? width: 200px;
? ? }

element ui的el-select框和選項(xiàng)框的寬度設(shè)置問(wèn)題

最終效果圖

有數(shù)據(jù)時(shí)：

無(wú)數(shù)據(jù)時(shí)：

常見(jiàn)情況-有數(shù)據(jù)時(shí)

代碼：

<el-select v-model="devType" style="width:100%">
	<el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

說(shuō)明：

控制選擇框的寬度，通過(guò)設(shè)置el-select的style即可?？刂泣c(diǎn)擊選擇框后彈出的選項(xiàng)框的寬度，直接設(shè)置el-option的style也可以，但是注意可能需要寫上!important才生效。

問(wèn)題：

問(wèn)題來(lái)了，如果想設(shè)置el-option的最小寬度等于el-select怎么辦？實(shí)際操作發(fā)現(xiàn)，若選項(xiàng)比較短通常自適應(yīng)的寬度小于選擇框?qū)挾?，效果如圖：

但是刷新頁(yè)面后，再次點(diǎn)擊查看選項(xiàng)，其自適應(yīng)的寬度又等于選擇框的寬度了，效果如圖：

費(fèi)解，源碼看不太懂，沒(méi)看出是怎么觸發(fā)調(diào)整選項(xiàng)框?qū)挾鹊模谑侵挥腥藶楦深A(yù)。

思考：只需要獲取el-select的寬度，賦給el-option即可。

解決代碼如下：

<el-select v-model="devType" @focus="setMinWidth" style="width:100%">
	<el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value" :style="{'min-width': minWidth + 2 + 'px'}"></el-option>
</el-select>
setMinWidth (val) {
    this.minWidth = val.srcElement.clientWidth
}

說(shuō)明：

1、給el-select添加focus事件，當(dāng)選擇框的 input 獲得焦點(diǎn)時(shí)觸發(fā)，獲取當(dāng)前節(jié)點(diǎn)的寬度存為最小寬度。

2、給el-option綁定樣式min-width最小寬度即可。

注意：

因?yàn)椴煌x擇框下的el-option不會(huì)同時(shí)出現(xiàn)，即便改變了同一界面的多個(gè)選項(xiàng)框?qū)挾纫矝](méi)關(guān)系。

常見(jiàn)情況-無(wú)數(shù)據(jù)時(shí)

還有一個(gè)問(wèn)題，對(duì)于出現(xiàn)“無(wú)數(shù)據(jù)”的選擇框時(shí)，如圖

給el-option綁定樣式是無(wú)效的，因?yàn)閑l-option根本不存在。

解決代碼如下：

<el-select v-model="devType" style="width:100%" @focus="setMinWidthEmpty">
    <el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
setMinWidthEmpty (val) {
    // 無(wú)數(shù)據(jù)的情況下，給請(qǐng)選擇提示設(shè)置最小寬度
    let domEmpty = document.getElementsByClassName('el-select-dropdown__empty')
    if (domEmpty.length > 0) {
		domEmpty[0].style['min-width'] = val.srcElement.clientWidth + 2 + 'px'
    }
}

說(shuō)明：

1、給el-select添加focus事件，當(dāng)選擇框的 input 獲得焦點(diǎn)時(shí)觸發(fā)，獲取當(dāng)前節(jié)點(diǎn)的寬度存為最小寬度。

2、同時(shí)獲取el-select-dropdown__empty樣式的節(jié)點(diǎn)，設(shè)置最小寬度。

注意：

1、getElementsByClassName不是getElementByClassName

2、放置當(dāng)前選擇框有數(shù)據(jù)時(shí)執(zhí)行該段報(bào)錯(cuò)，必須判斷空節(jié)點(diǎn)的數(shù)量，存在再設(shè)置最小寬度。

3、若同時(shí)有多個(gè)el-select-dropdown__empty樣式的節(jié)點(diǎn)，應(yīng)該遍歷設(shè)置最小寬度，但是我只設(shè)置第一個(gè)竟然都能生效，原因未知。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論