腳本之家服務器常用軟件

快捷導航

vue?element修改el-select控件長度style=“width:XXpx“不生效的解決

更新時間：2023年07月18日 09:17:14 作者：Kyulin151020

這篇文章主要介紹了vue?element修改el-select控件長度style=“width:XXpx“不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element修改el-select長度style=“width:XXpx“不生效

問題

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

<template>
? ? <div class="formHeader">
? ? ? ? ? ? <div style="margin-left:20px">
? ? ? ? ? ? ? ? ? ? <span>選項：</span>
? ? ? ? ? ? ? ? ? ? <el-select v-model="form.selectValue" placeholder="請選擇" 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也是）使用的其實是 input 標簽 , 而 input 標簽在瀏覽器中存在一個默認的寬度 , 大約是 100px (不同的瀏覽器表現(xiàn)不同) 。

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

解決方法

設置如下樣式即可：

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

element ui的el-select框和選項框的寬度設置問題

最終效果圖

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

在這里插入圖片描述

無數(shù)據(jù)時：

在這里插入圖片描述

常見情況-有數(shù)據(jù)時

代碼：

<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>

說明：

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

問題：

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

在這里插入圖片描述

但是刷新頁面后，再次點擊查看選項，其自適應的寬度又等于選擇框的寬度了，效果如圖：

在這里插入圖片描述

費解，源碼看不太懂，沒看出是怎么觸發(fā)調(diào)整選項框?qū)挾鹊?，于是只有人為干預。

思考：只需要獲取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
}

說明：

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

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

注意：

因為不同選擇框下的el-option不會同時出現(xiàn)，即便改變了同一界面的多個選項框?qū)挾纫矝]關系。

常見情況-無數(shù)據(jù)時

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

在這里插入圖片描述

給el-option綁定樣式是無效的，因為el-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) {
    // 無數(shù)據(jù)的情況下，給請選擇提示設置最小寬度
    let domEmpty = document.getElementsByClassName('el-select-dropdown__empty')
    if (domEmpty.length > 0) {
		domEmpty[0].style['min-width'] = val.srcElement.clientWidth + 2 + 'px'
    }
}

說明：

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

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

注意：

1、getElementsByClassName不是getElementByClassName

2、放置當前選擇框有數(shù)據(jù)時執(zhí)行該段報錯，必須判斷空節(jié)點的數(shù)量，存在再設置最小寬度。

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