学习笔记——vue中使用el-dropdown组件报错

news2024/11/27 2:37:38

今天在工作中,发现使用el-select做的下拉框,下拉菜单展开后,鼠标点击下拉框之外的区域时,下拉菜单没有收起。然后,我打开控制台,发现了这个错误。

Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')
    at VueComponent.removeTabindex (dropdown.js:443:1)
    at VueComponent.hide (dropdown.js:369:1)
    at Object.documentHandler (clickoutside.js:39:1)
    at clickoutside.js:25:1
    at Array.forEach (<anonymous>)
    at HTMLDocument.<anonymous> (clickoutside.js:24:1)


一、错误

 二、原因

使用“el-dropdown”组件时,没加上它的子组件“el-dropdown-menu”。

主要原因就是代码迭代过程中,有些代码不需要了,但是为了贪图一时的方便以及未来可能需要恢复原先的代码,并没有完全修改完全。所以出现了错误。

第一次遇到该错误,排查了一个多小时左右,才解决。

 该错误解决后,点击其他区域就不会再报上述的错误了。

理所当然,下拉框也可以在点击其他区域后收起。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/577857.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《Linux0.11源码解读》理解(四) head之重新设置IDT/GDT

上节提到&#xff0c;现在cs:ip指向0地址&#xff0c;此处存储着作为操作系统核心代码的system模块&#xff0c;是由head.s和 main.c以及后面所有源代码文件编译链接而成。head.s(以下简称head)紧挨着main.c&#xff0c;我们先执行head。 重新设置内核栈 _pg_dir: _startup_3…

堆(堆排序 模拟堆)

目录 一、堆的数据结构二、堆的操作方法往下调整的示意图往上调整的示意图相关功能的实现思路1.插入一个数2.求最小值3.删除最小值4.删除任意一个元素5.修改任意一个元素 三、堆的实战运用堆排序模拟堆 一、堆的数据结构 堆是一个完全二叉树&#xff1a;除了最后一层结点以外&…

C语言三子棋,五子棋,n子棋的代码实现

C语言三子棋&#xff0c;五子棋&#xff0c;n子棋的代码实现 这里以五子棋为例&#xff0c;来说明开发过程开发思路菜单打印棋盘的打印棋子的打印电脑下棋&#xff08;随机数&#xff09;判断输赢代码整合注意事项 这里以五子棋为例&#xff0c;来说明开发过程 其中该项目包含…

《用户增长方法论》从产品、渠道、营销创意等多个维度,搭建了一套完整的用户增长方法体系

关于作者 黄永鹏&#xff0c;目前在阿里巴巴担任高级用户增长专家。黄永鹏是一个典型的 “ 斜杠青年 ” &#xff0c;十年前从广告咨询行业转战互联网&#xff0c;在 BAT 三家 公司都待过&#xff0c;负责过多款用户和日活过亿的产品&#xff0c;比如腾讯手机管家、百度地图…

chatgpt赋能python:Python练手:提高你的SEO技能

Python练手&#xff1a;提高你的SEO技能 在当今数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;成为了网站和企业在线成功的关键。优化技巧既可以提高网站的排名&#xff0c;还可以增加网站的可见性&#xff0c;从而吸引更多的流量和潜在客户。Python是一个适…

网络通信协议-ARP协议

目录 一、ARP协议 二、ARP协议通信过程 应用情景一&#xff1a;同一广播域内通信 &#xff08;1&#xff09;第一步&#xff1a;ARP协议通信 1.交换机接受消息 2.电脑2接收到广播消息 3.电脑2回复 4.交换机转发回复给电脑1 5.电脑1记录 &#xff08;2&#xff09;第二…

Go快速上手之基础语法 | 青训营笔记

Go快速上手之基础语法 &#xff5c; 青训营笔记 文章目录 Go快速上手之基础语法 &#xff5c; 青训营笔记系列介绍本文摘要1. Go 介绍2. Go 的环境配置2.1 :sparkles: IDE2.2 Gitpod 和 Jetbrians Gateway 的使用 3. Go的基础语法3.1 Hello World3.2 变量与常量3.3 条件控制语句…

Linux(进程间通信)

目录&#xff1a; 1.进程间通信的介绍 2.管道通信 3.管道的原理 ------------------------------------------------------------------------------------------------------------------------------- 1.进程间通信的介绍 2.管道通信 当我们在创建子进程时&#xff0c;我们的…

chatgpt赋能python:Python生成pyc文件的介绍

Python生成pyc文件的介绍 Python是一种解释型语言&#xff0c;但是在执行某些操作时&#xff0c;它会生成缓存文件&#xff0c;以便提高执行效率。这些缓存文件以 .pyc 扩展名保存在同一目录中。 在本文中&#xff0c;我们将重点介绍Python生成pyc文件&#xff0c;并探讨它们…

使用Python绘制M2货币供应率曲线

M2广义货币供应量&#xff1a;流通于银行体系之外的现金加上企业存款、居民储蓄存款以及其他存款&#xff0c;它包括了一切可能成为现实购买力的货币形式&#xff0c;通常反映的是社会总需求变化和未来通胀的压力状态。近年来&#xff0c;很多国家都把M2作为货币供应量的调控目…

Fedora安装并配置开启SSH服务相关命令

Ubuntu参考我这篇&#xff1a;虚拟机里安装ubuntu-23.04-beta-desktop-amd64&#xff0c;开启SSH(换源、备份)&#xff0c;配置中文以及中文输入法等 一、过程 1、检测是否安装了openssh-server $ rpm -qa | grep openssh-serveropenssh-server-7.9p1-5.fc30.x86_642、如果上…

【web框架】——Django——如桃花来

目录索引 web框架介绍&#xff1a;常见软件的架构&#xff1a;*CS架构&#xff1a;**BS架构&#xff1a;* 网络通信&#xff1a;socket知识复习&#xff1a;*服务端代码逻辑&#xff1a;**客户端代码逻辑&#xff1a;* socket代码演示&#xff1a;*服务端代码演示&#xff1a;*…

chatgpt赋能python:Python生成:深入了解Python编程中的生成

Python 生成&#xff1a;深入了解Python编程中的生成 简介 Python是一门多用途编程语言&#xff0c;广泛应用于 Web 开发&#xff0c;数据分析&#xff0c;人工智能和科学计算等领域。在Python编程中&#xff0c;生成是一个强大而又常用的概念。本文将介绍Python编程中的生成…

如何在华为OD机试中获得满分?Java实现【输入n个整数,输出其中最小的k个】一文详解!

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: Java华为OD机试真题&#xff08;2022&2023) 文章目录 1. 题目描述2. 输入描述3. 输出描述…

Java 的 String、StringBuffer 和 StringBuilder(一文讲透)

提到 String、StringBuffer 和 StringBuilder&#xff0c;就不得不谈及它们的历史&#xff0c;在了解它们的历史之后&#xff0c;我们对它们的理解将更上一级台阶&#xff01; 发展历史 String 与 StringBuffer 的出现 String 和 StringBuffer 在 Java1.0 中就已经有了&…

chatgpt赋能python:Python自动操作软件:提高工作效率和节省时间的利器

Python自动操作软件&#xff1a;提高工作效率和节省时间的利器 Python是一种高级编程语言&#xff0c;具有易读易用、快速开发、可移植性好、跨平台兼容等优点。它在自动化操作方面具有很大的优势&#xff0c;可以帮助用户实现各种自动化操作&#xff0c;从而为我们的工作提供…

有哪些信息安全/网络安全/渗透测试/众测/CTF/红蓝攻防/漏洞测试等前沿技术/研究/技巧获取渠道?

​前言 护网的定义是以国家组织组织事业单位、国企单位、名企单位等开展攻防两方的网络安全演习。进攻方一个月内采取不限方式对防守方展开进攻&#xff0c;不管任何手段只要攻破防守方的网络并且留下标记即成功&#xff0c;直接冲到防守方的办公大楼&#xff0c;然后物理攻破…

第2章 Class

Point结构体 //C语言写法 typedef struct point{float x;float y; }Point;Point a; a.x 1; a.y 2; //const表示p指向的对象里的值不能由p指针修改 void print(const Point* p){printf("%d %d\n", p -> x, p -> y); } print(&a);//想实现点的移动&#x…

深入解析OSI七层协议:实现网络通信的基石

目录 引言&#xff1a;详细介绍1. 物理层&#xff08;Physical Layer&#xff09;2. 数据链路层&#xff08;Data Link Layer&#xff09;3. 网络层&#xff08;Network Layer&#xff09;4. 传输层&#xff08;Transport Layer&#xff09;5. 会话层&#xff08;Session Layer…

【章节1】git commit规范 + husky + lint-staged实现commit的时候格式化代码

创建项目我们不多说&#xff0c;可以选择默认的&#xff0c;也可以用你们现有的项目。 前言&#xff1a; git commit 的时候总有人填写一堆花里胡哨乱写的内容&#xff0c;甚至看了commit 的描述都不知道他这次提交到底做了个啥&#xff0c;那我们有没有办法规范大家的commit提…