Vue3+element-plus,打包报错:Cannot read properties of null (reading ‘insertBefore‘)

一、现象:vue3 + element-plus项目,本地启动时,页面所有操作都正常;部署到生产环境后,el-dialog、el-drawer弹框报错。

在这里插入图片描述
这个弹框报错问题,困扰好几天,查阅资料,可能是如下几个问题。
我这个项目给弹框添加 destroy-on-close解决了。

二、解决方案

1. el-dialog 组件导致

默认弹框是关闭的,DOM中没有弹框中的内容。打开弹框再关闭后,弹框中的 DOM 元素没有被销毁,可能会因为不该存在的 DOM 元素而报错(我的报错就是由此导致)。

解决方案:给 el-dialog 组件增加 destroy-on-close 属性

2. v-if导致

在 v-if 值为 false 时,如果操作了 v-if 控制的 DOM,可能会因为该 DOM 元素不存在而报错。

解决方案:v-show 替换 v-if

3. el-table 组件导致

el-table-column渲染时报错,若 scope.row.field(field为任意字段值)不存在,对其直接执行 length、toString() 等方法而报错,先判断字段是否存在。

<el-table-columnlabel="日期"><template v-slot="{ row }">{{ row && row.time ? dayjs(row.time).format('YYYY-MM-DD') : ''}}</template>
</el-table-column>

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

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

相关文章

数据结构-树-二叉树-堆的实现

1.树概念及结构 树是一种 非线性 的数据结构&#xff0c;它是由 n &#xff08; n>0 &#xff09;个有限结点组成一个具有层次关系的集合。 把它叫做树是因 为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的 。 有一个特殊的结点&#xff…

从裸机启动开始运行一个C++程序(十四)

前序文章请看&#xff1a; 从裸机启动开始运行一个C程序&#xff08;十三&#xff09; 从裸机启动开始运行一个C程序&#xff08;十二&#xff09; 从裸机启动开始运行一个C程序&#xff08;十一&#xff09; 从裸机启动开始运行一个C程序&#xff08;十&#xff09; 从裸机启动…

牛客 算法题 记负均正II golang实现

题目 HJ105 记负均正II golang 实现 package mainimport ("bufio""fmt""io""os""strconv""strings" )func main() {scanner : bufio.NewScanner(os.Stdin)nums:make([]int,0)sum:0minus:0for scanner.Scan() {l…

quickapp_快应用_DOM是否显示只能通过if指令!

目录 官网概念语法拓展使用三元表达式控制示例 官网 if指令 概念 if条件指令用于控制是否增加或者删除组件。 语法 <组件名 ifbol><组件名>上述语法中只要bol值为ture则显示该组件&#xff0c;若是bol值为false则不显示该组件(并将其从DOM结构中移除)。 拓展…

持续集成交付CICD:GitLabCI 通过trigger触发流水线

目录 一、理论 1.GitLabCI 二、实验 1.搭建共享库项目 2.GitLabCI 通过trigger触发流水线 三、问题 1.项目app02未触发项目app01 2.GitLab 报502网关错误 一、理论 1.GitLabCI (1) 概念 GitLab CI&#xff08;Continuous Integration&#xff09;是一种持续集成工具…

华为云人工智能入门级开发者认证学习笔记

人工智能入门级开发者认证 人工智能定义 定义 人工智能 (Artificial Intelligence) 是研究、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。 强人工智能 vs 弱人工智能 强人工智能&#xff1a;强人工智能观点认为有可能制造出真正能推理&#xff08…

Redis-缓存高可用集群

Redis集群方案比较 哨兵模式 性能和高可用性等各方面表现一般&#xff0c;特别是在主从切换的瞬间存在访问瞬断的情况。另外哨兵模式只有一个主节点对外提供服务&#xff0c;没法支持很高的并发&#xff0c;且单个主节点内存也不宜设置得过大&#xff0c;否则会导致持久化文件过…

机器学习【02】在 Pycharm 里使用 Jupyter Notebook

只有 Pycharm 的 Professional 版才支持 Jupyter Notebook 本教程结束只能在pycharm中使用&#xff0c;下载的库在pycharm选中的虚拟环境中 ssh -L localhost:9999:localhost:8888 usernameip这句话每次都要用 准备 1.服务器安装jupyter sudo snap install jupyter2.在 Jup…

C#学习相关系列之base和this的常用方法

一、base的用法 Base的用法使用场景主要可以概括为两种&#xff1a; 1 、访问基类方法 2、 调用基类构造函数 使用要求&#xff1a;仅允许用于访问基类的构造函数、实例方法或实例属性访问器。从静态方法中使用 base 关键字是错误的。所访问的基类是类声明中指定的基类。 例如&…

怎样通过代理ip提高上网速度

在当今互联网高度发达的时代&#xff0c;我们经常需要使用代理IP来隐藏自己的真实IP地址或提高网络连接速度。然而&#xff0c;有些用户可能会遇到代理IP无法提高网络速度的情况。那么&#xff0c;如何通过代理IP提高上网速度呢&#xff1f;以下是几个技巧&#xff1a; 1.选择…

android 保活的一种有效的方法

android 保活的一种有效的方法 为什么要保活 说起程序的保活,其实很多人都觉得,要在手机上进行保活,确实是想做一些小动作,其实有些正常的场景也是需要我们进行保活的,这样可以增强我们的用户体验。保活就是使得程序常驻内存,这种程序不容易被杀,或者在被杀以后还能完…

【CVE-2021-1675】Spoolsv打印机服务任意DLL加载漏洞分析

漏洞详情 简介 打印机服务提供了添加打印机的接口&#xff0c;该接口缺乏安全性校验&#xff0c;导致攻击者可以伪造打印机信息&#xff0c;在添加新的打印机时实现加载恶意DLL。这造成的后果就是以system权限执行任意代码。 影响版本 windows_10 20h2 windows_10 21h1 win…

第97步 深度学习图像目标检测:RetinaNet建模

基于WIN10的64位系统演示 一、写在前面 本期开始&#xff0c;我们继续学习深度学习图像目标检测系列&#xff0c;RetinaNet模型。 二、RetinaNet简介 RetinaNet 是由 Facebook AI Research (FAIR) 的研究人员在 2017 年提出的一种目标检测模型。它是一种单阶段&#xff08;o…

RabbitMQ 安装(在docker容器中安装)

为什么要用&#xff1f; RabbitMQ是一个开源的消息代理和队列服务器&#xff0c;主要用于在不同的应用程序之间传递消息。它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c;并提供了一种异步协作机制&#xff0c;以帮助提高系统的性能和扩展性。 RabbitMQ的作…

​LeetCode解法汇总2304. 网格中的最小路径代价

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 给你一个下…

Flink实战(11)-Exactly-Once语义之两阶段提交

0 大纲 [Apache Flink]2017年12月发布的1.4.0版本开始&#xff0c;为流计算引入里程碑特性&#xff1a;TwoPhaseCommitSinkFunction。它提取了两阶段提交协议的通用逻辑&#xff0c;使得通过Flink来构建端到端的Exactly-Once程序成为可能。同时支持&#xff1a; 数据源&#…

【Redis】前言--介绍redis的全局系统观

一.前言 学习是要形成自己的网状知识以及知识架构图&#xff0c;要不最终都还是碎片化的知识&#xff0c;不能达到提升的目的&#xff0c;只有掌握了全貌的知识才是全解&#xff0c;要不只是一知半解。这章会介绍redis的系统架构图&#xff0c;帮助认识redis的设计是什么样的&a…

解决几乎任何机器学习问题 -- 学习笔记(组织机器学习项目)

书籍名&#xff1a;Approaching (Almost) Any Machine Learning Problem-解决几乎任何机器学习问题 此专栏记录学习过程&#xff0c;内容包含对这本书的翻译和理解过程 我们首先来看看文件的结构。对于你正在做的任何项目,都要创建一个新文件夹。在本例中,我 将项目命名为 “p…

笔记:内网渗透流程之信息收集

信息收集 首先&#xff0c;收集目标内网的信息&#xff0c;包括子网结构、域名信息、IP地址范围、开放的端口和服务等。这包括通过主动扫描和渗透测试工具收集信息&#xff0c;以及利用公开的信息源进行信息搜集。 本机信息收集 查看系统配置信息 查看系统详细信息&#xf…

电子桌牌如何赋能数字化会务?以深圳程序员节为例。

10月24日&#xff0c;由深圳市人民政府指导&#xff0c;深圳市工业和信息化局、龙华区人民政府、国家工业信息安全发展研究中心、中国软件行业协会联合主办的2023深圳中国1024程序员节开幕式暨主论坛活动在深圳龙华区启幕。以“领航鹏城发展&#xff0c;码动程序世界”为主题&a…