Element UI Select组件远程搜索没有箭头图标

米糕果

已于 2023-12-11 12:42:52 修改

阅读量1.8k

点赞数 15

文章标签： ui vue.js elementui

于 2023-12-11 10:33:13 首次发布

本文链接：https://blog.csdn.net/qq_51942464/article/details/134918550

版权

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