問題描述
el-select 組件啟用遠(yuǎn)程搜索，加上remote并傳入一個(gè)remote-method，此時(shí)內(nèi)部i標(biāo)簽類名缺失，選擇器無法顯示下拉箭頭圖標(biāo)
問題解決:CSS解決
.el-select {
.el-select__caret:first-child::before {
content: "\e6e1";
}
.is-focus {
.el-select__caret:first-child {
transform: rotateZ(0deg);
}
}
}
問題解決:JS解決
在控制臺(tái)查看對(duì)應(yīng)的 dom，發(fā)現(xiàn)使用遠(yuǎn)程搜索之后，對(duì)應(yīng)的 icon 的 class 缺失，將缺失部分的class補(bǔ)全（el-icon-arrow-up）即可
tip：
只需要找到對(duì)應(yīng)的 dom，然后添加 class(el-icon-arrow-up)
初始化的時(shí)候新增下拉箭頭的 class，當(dāng)用戶觸發(fā)聚焦的時(shí)候，還得添加對(duì)應(yīng)的旋轉(zhuǎn)的 class(
is-reverse)，當(dāng)失焦時(shí)候，又需要移除對(duì)應(yīng)的旋轉(zhuǎn) class(is-reverse）
- 添加ref綁定dom元素和事件監(jiān)控 @visible-change=“reverseArrow” 監(jiān)控下拉框的出現(xiàn)
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="請(qǐng)輸入關(guān)鍵詞"
:remote-method="remoteMethod"
:loading="loading"
ref="my-select"
@visible-change="reverseArrow"
>
- mounted階段找到并添加類名：因?yàn)槭遣僮鱠om，所以需要在dom加載完成之后的生命周期內(nèi)使用
mounted() {
let rulesDom = this.$refs["my-select"].$el.querySelector(".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon");
rulesDom.classList.add("el-icon-arrow-up"); // 對(duì)dom新增箭頭圖標(biāo)
},
methods: {
reverseArrow(flag) {
// 找到dom
let rulesDom = this.$refs["my-select"].$el.querySelector(".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon");
if(flag){
rulesDom.classList.add("is-reverse"); // 對(duì)dom新增class
}else{
rulesDom.classList.remove("is-reverse"); // 對(duì)dom移除class
}
},
}
兩種方法的缺陷
- CSS解決
只在有多個(gè)遠(yuǎn)程搜索的el-select時(shí)有效
- JS解決
只對(duì)指定ref名稱的el-select有效，在有多個(gè)相同名稱的ref的el-select時(shí)，只對(duì)最后面一個(gè)el-select有效文章來源：http://www.zghlxwxcb.cn/news/detail-764846.html
參考資料
el-select 遠(yuǎn)程搜索時(shí) 沒有箭頭圖標(biāo)如果需求說需要加上圖標(biāo)的話
el-select使用filterable右側(cè)箭頭消失
element v2.15.7 el-select 使用:remote-method 沒有下拉箭頭問題文章來源地址http://www.zghlxwxcb.cn/news/detail-764846.html
到了這里，關(guān)于Element UI Select組件遠(yuǎn)程搜索沒有箭頭圖標(biāo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
