el-select使用filterable右侧箭头消失

记录思路

写这个是为了记录一哈开发中遇到的问题。

现有样式

需要修改成

修改思路

1：在控制台查看对应的dom,发现，使用远程搜索之后，对应的icon的class有变化，如下图所示：

2：将上图缺失部分的class补全（el-icon-arrow-up）啊哈，果然就出现了下拉图标。
好了，那我们的只需要找到对应的dom,然后添加class就可以了。

3：vue项目我就没使用jQuery了，就使用vue跟js的查找dom的方法，首先在对应的el-select中加入个ref,然后使用querySelector找到具体的dom。

具体实现代码如下：

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

注意

因是操作dom,所以需要在dom加载完成之后的生命周期内使用。

转折

到这基本样子是有了，但是你选择的时候，会发现，右侧的下拉箭头不转动，查看对应的dom之后发现多了个class，如下图:

到这里就基本知道了，我们需要初始化的时候新增下拉箭头的class,当用户触发聚焦的时候，还得添加对应的旋转的class,当失焦时候，又需要移除对应的旋转class。具体代码跟上面类似，我这边就不补充了。(实在有需要的可以下面留言)