在控制台查看对应的 dom,发现使用远程搜索之后,对应的 icon 的 class 缺失,将缺失部分的class补全(el-icon-arrow-up)即可
tip:
只需要找到对应的 dom,然后添加 class(el-icon-arrow-up)
初始化的时候新增下拉箭头的 class,当用户触发聚焦的时候,还得添加对应的旋转的 class(is-reverse),当失焦时候,又需要移除对应的旋转 class(is-reverse)
1、添加ref绑定dom元素和事件监控 @visible-change=“reverseArrow” 监控下拉框的出现22
<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 } }, }