Element UI Select组件远程搜索没有箭头图标
问题描述
el-select 组件启用远程搜索,加上remote
并传入一个remote-method
,此时内部i标签类名缺失,选择器无法显示下拉箭头图标
问题解决:CSS解决
.el-select {
.el-select__caret:first-child::before {
content: "\e6e1";
}
.is-focus {
.el-select__caret:first-child {
transform: rotateZ(0deg);
}
}
}
问题解决:JS解决
在控制台查看对应的 dom,发现使用远程搜索之后,对应的 icon 的 class 缺失,将缺失部分的class补全(el-icon-arrow-up
)即可
tip:
只需要找到对应的 dom,然后添加 class(el-icon-arrow-up)
初始化的时候新增下拉箭头的 class,当用户触发聚焦的时候,还得添加对应的旋转的 class(
is-reverse
),当失焦时候,又需要移除对应的旋转 class(is-reverse)
- 添加ref绑定dom元素和事件监控 @visible-change=“reverseArrow” 监控下拉框的出现
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
ref="my-select"
@visible-change="reverseArrow"
>
- mounted阶段找到并添加类名:因为是操作dom,所以需要在dom加载完成之后的生命周期内使用
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"); // 对dom新增箭头图标
},
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"); // 对dom新增class
}else{
rulesDom.classList.remove("is-reverse"); // 对dom移除class
}
},
}
两种方法的缺陷
- CSS解决
只在有多个远程搜索的el-select时有效
- JS解决
只对指定ref名称的el-select有效,在有多个相同名称的ref的el-select时,只对最后面一个el-select有效
参考资料
el-select 远程搜索时 没有箭头图标如果需求说需要加上图标的话
el-select使用filterable右侧箭头消失
element v2.15.7 el-select 使用:remote-method 没有下拉箭头问题