element input的Autocomplete下拉列表动态隐藏

目标：根据input远程搜索输入元素个数动态控制Autocomplete下拉列表动态隐藏

重点：使用element框架中的popper-class给下拉div添加class新名称

步骤：

  1. 定义动态select的popper-class值
    在这里插入图片描述

  2. 设置json列表数据源

  3. 查看div是否已有指定的class名称
    在这里插入图片描述

  4. 调用指定元素（思路：先获取指定标签，然后再获取指定标签的根，最后获取需要的标签）
    为什么要先获取根呢？因为element下拉的dom是在最外层，所以只能退出去再获取。

this.指定标签元素.$el.ownerDocument.querySelectorAll('添加的动态类名')
重点要知道ownerDocument、querySelectorAll两个属性
 
ownerDocument是获取根节点
	
querySelectorAll方法可以和JQ一样简介的获取指定类。
posted @   轻风细雨_林木木  阅读(88)  评论(0)  编辑  收藏  举报
相关博文：
·  element 侧菜单选中默认选中，及事件，分组
·  Element引入和使用
·  elementUI远程搜索功能遇到的坑（el-autocomplete） 如果是提前加载出全量数据 去掉v-model.trim换为 v-model=“nameinputvalue”
·  el-autocomplete 使用 --模糊查询
·  element-ui框架中el-select组件在按回车时，如何隐藏下拉菜单，并触发键盘事件
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手