首页 > 其他分享 >el-Select组件远程搜索没有箭头图标

el-Select组件远程搜索没有箭头图标

时间:2024-10-08 16:19:29浏览次数:9  
标签:__ el dom input icon class Select 图标

在控制台查看对应的 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"
 >
  1. mounted阶段找到并添加类名:因为是操作dom,所以需要在dom加载完成之后的生命周期内使用
  2.  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
            }
        },
     }
    

标签:__,el,dom,input,icon,class,Select,图标
From: https://blog.csdn.net/weixin_44201656/article/details/142760002

相关文章

  • 为什么 React 和 Vue 不采用像 Svelte 那样的编译方式?
    在前端框架的竞争中,Svelte近年来以其极高的性能和轻量级的架构吸引了众多开发者的注意。与React和Vue等传统框架不同,Svelte通过编译时优化实现高效的UI更新,不依赖于虚拟DOM。然而,尽管Svelte的这种方法具有明显的性能优势,React和Vue仍然没有采用类似的编译方式......
  • shell基础知识(历史命令)
    1.2历史命令1.2.1!在命令中的应用当我们在linux中执行命令时,执行过的每一条命令都会被保存到家目录的.bash_history文件中,需要注意的是:只有当用户正常退出当前shell时,在当前shell中运行的命令才会保存至.bash_history文件中!!:连续两个!表示执行上一条指令[root@localhost~]......
  • 动态修改iconfont图标配色
    引言在iconfont图标字体库详细介绍一文中介绍了iconfont图标字体库的三种使用方法,分别是1.unicode引用2.font-class引用3.symbol引用。其中只有symbol引用的方式才能保留图标的色彩。但是如果我们想改变图标的颜色,那么该如何做呢?解决方法以React为例,在项目中,封装......
  • 善用Excel,制作加班费统计表
    Hello,大家好。今天给大家分享由我制作的加班费统计表,该表由EXCEL完成,下面就和我一起来体验吧。填写节假日和加班时薪信息首先我们需要查询万年历,在下图的标记区域1中,将节假日及调休信息填写好。接着修改标记区域2,将基准填写为你所在城市的最低工资标准。平时指的是1.5倍......
  • CentOS报错:Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=7&
    CentOS报错:Couldnotretrievemirrorlisthttp://mirrorlist.centos.org/?release=7&arch=x86_64&repo=os&infra=stock32errorwas14:curl#6-"Couldnotresolvehost:mirrorlist.centos.org;Unknownerror"关于CentOS报错:Couldnotretrievemirr......
  • element-plus如何使用可编辑的table
    ElementPlus的Table组件本身不提供内置的编辑功能。但是可以通过结合Table组件和Form组件来实现行级别的可编辑功能<template><el-table:data="tableData"style="width:100%"><el-table-columnprop="date"label="日期"width="180&quo......
  • Fully-developed Web App
    Assessment2:Fully-developedWebApp-DetailsWeighting:50%(PairorIndividual)NB:youshouldnotstartthisassignmentuntil after youhavesubmittedassignment1Overview- Fully-developedWebAppDue:Sunday27/10/24@11:59:00PM(Week5)Taskdes......
  • Intel core 2 QX6600 CPU
    目录简介参数1.基本规格2.热设计功耗(TDP)3.内存支持4.架构与特性5.其他信息参考链接简介Intelcore2QX6600CPU中文名QX是一款IntelExtreme版处理器,具有解锁的倍频,并且在发布时是最快的。双核和四核的非X型号实际上在工作站系列中没有任何作用,除了以更高的速度运......
  • abc373E How to Win the Election
    有N个候选人和总共K张选票,目前第i个候选人的票数为A[i]。在全部选票统计完成后,如果得票数多于自己的人数小于M,则当选,可以多个人同时当选。对于每个人,输出当选需要再获得的最少票数。1<=M<=N<=2E5,1<=K<=1E12,0<=A[i]<=1E12,sum(A[i])<=K分析:对每个候选人,二分答案,假设需要的票......
  • 解决undefined reference to `google::protobuf::MessageLite::SerializeToString(std
    按照如下步骤安装了proto:https://zhuanlan.zhihu.com/p/631291781但是在后续的protoBuf测试demo中出现了问题 root@e23598ae2d28:/home/lee/Code/protof_test#g++test.cccontacts.pb.cc-otest_proto-lprotobuf-std=c++11-lpthread/tmp/ccbTc1bj.o:Infunction`......