element v2.15.7 el-select 使用:remote-method 没有下拉箭头问题

最新推荐文章于 2024-09-11 10:52:43 发布

Gazer_S

最新推荐文章于 2024-09-11 10:52:43 发布

阅读量1.3k

点赞数 2

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_37342647/article/details/130607274

版权

在ElementUI的2.15.7版本中，使用:remote-method时，el-select组件内的箭头图标类名缺失。为解决这个问题，可以在Vue组件的mounted阶段找到DOM元素并手动添加类名。同时，通过@visible-change事件监听下拉框的显示状态，动态添加或移除is-reverse类以恢复箭头的正常显示。

摘要由CSDN通过智能技术生成

背景

需求里有个地方用到el-select请求接口动态显示。但是element 2.15.7版本使用 :remote-method的时候，内部组件实现的i标签会缺少类名，但是产品需要补回这个箭头。在这里简单记录下解决方法，方便其他踩坑的人解决这个小问题。不过这里其实是参考了https://blog.csdn.net/weixin_42381896/article/details/122258563 他的文章的，然后一些截图也类似，里面我就先直接复制了。

问题

在这里插入图片描述远程搜索的时候右边是这样缺少箭头的。

原因

在这里插入图片描述
这个版本el-select添加:remote-method的时候，内部i标签类名缺失。所以我们找到这个组件dom元素下的i标签将类名补齐，根据之前就有的一些逻辑来补全就好了。

解决方法

Mounted阶段找到并添加类名。

let rulesDom = this.$refs["my-select"].$el.querySelector(".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"); // 找到dom
    rulesDom.classList.add("el-icon-arrow-up"); // 对dom新增class

然后在el-select组件里添加事件监控 @visible-change=“reverseArrow” 监控下拉框的出现，因为我们就是根据这个来还原箭头的。

reverseArrow(flag) {
      let rulesDom = this.$refs["my-select"].$el.querySelector(".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"); // 找到dom
      if (flag) {
        rulesDom.classList.add("is-reverse"); // 对dom新增class
      } else {
        rulesDom.classList.remove("is-reverse"); // 对dom新增class
      }
    },