【Element】el-table操作数据DOM报错（reading：insertBefore）

前端渲染与对话框优化
最新推荐文章于 2024-11-14 09:45:08 发布
原创 最新推荐文章于 2024-11-14 09:45:08 发布 · 417 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #elementui

本文探讨了在前端开发中遇到的el-table渲染问题及el-dialog弹窗的优化策略。建议将v-if替换为v-show以提升性能，并介绍如何设置el-dialog的关闭销毁属性以解决弹窗渲染问题。同时，提醒开发者注意在使用数据时进行数据存在性检查，例如scope.row.name?.name，以防止未定义的数据导致的错误。

报错场景

图一

其他可能问题

el-table渲染问题

  • 考虑是否v-if和v-show的使用问题
  • v-if改为v-show

el-dialog弹窗渲染问题

  • 为el-dialog增加关闭销毁属性
    在这里插入图片描述

使用数据中的问题

  • 使用方法返回的数据，使用scope.row中的数据，数据不存在，增加判断scope.row.name?.name
vue3 - element plus 报错 TypeError: Cannot read properties of null (reading ‘emitsOptions‘)，使用组件报错详细解决
高级前端工程师
06-12 6216
vue3，elementPlus，TypeError: Cannot read properties of null (reading 'emitsOptions')，TypeError: Cannot read properties of null (reading 'insertBefore')，vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'分析，在本地运行的时候一点错误也没有，但是打包后放到线上环境就开始报错，vue3报错
vue3 - 详解报错TypeError: Failed to execute ‘insertBefore‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
高级前端工程师
07-27 1万+
vue3，nuxt3，vite，报错，TypeError: Failed to execute ‘insertBefore‘ on ‘Node‘: parameter 1 is not of type 'Node'.，节点报错，vue3 insertBefore，打包，运行，编译，dom元素，渲染，路由router，组件components，vue3生产环境跳转路由报错，浏览器控制台报错，百度地图使用报错，报错爆红，vue项目报错，插入节点insertBefore()报错，vue3 用global.prod
el-table-column组件，生产环境报Cannot read property ‘insertBefore‘ of null
一枚小前端
01-06 1845
原作者对这个问题解释的链接：点这里跳转 数据一开始，这里的下标[0]undefined <el-table-column prop="typeId" align="center" label="类型"> <template #default="scope"> <div> {{ remarkTypeList.filter(v => v.id == scope.row.typeId)[0]?.na
TypeError: Cannot read properties of null (reading ‘insertBefore‘) vue项目报错
a9874561328的博客
09-15 1万+
本地无论怎么样都不会报错，但是部署到服务器之后，切换到某个路由之后再切换路由之后就疯狂报错，百思不得其解，网上搜了一下说是主要又三个原因造成，粘贴一段我搜索到的，我觉得说的也很有道理，但是并不能解决我的问题。之后我把每一块代码注掉部署注掉部署之后发现是我的table有问题，跟他说的第三个原因好像是同一个，原来是我在template中调用了方法格式化数据，但是这个数据可能不存在，在这里进行兼容处理一下就解决了。解决方案：给 el-dialog 组件增加 destroy-on-close 属性。
vue相关问题
qq_41168019的博客
08-10 4553
2. 尝试向错误的父节点插入节点：如果尝试将节点插入到错误的父节点或非法的节点上，会触发此错误。请确保正确获取到目标节点和父节点，并验证它们的有效性。1. 确保目标节点存在于正确的父节点中：检查您正在使用的 `insertBefore` 方法，确保将新节点插入到正确的父节点的子节点列表中。Vue 中出现 "未能在节点上执行 'insertBefore'" 错误通常是由于将节点插入到错误的父节点或非法的节点上导致的。未能在节点上执行“insertbefore”：要插入新节点的节点不是此节点的子节点。
element 表格打包部署报错Cannot read properties of null (reading ‘insertBefore‘)
weixin_57011137的博客
03-08 2696
原因可能是el-table-column渲染时报错 <el-table-column align="center" v-for="(item,index) in tableTitle" :key="TableKey+index" show-overflow-tooltip :label="tableTitle[index]" >
vue element el-table 数据渲染报错 Invalid prop: type check failed for prop "data". Expected Array, got Obj...
weixin_30550271的博客
11-21 802
在这个组件中 el-table必须使用数组，不能是对象 但是这里有个问题，我后台PHP返回的明明是数组，怎么在前端被转换成对象了? 经过测试发现问题，我传送的数据是多维数组，如果数组下标是按顺序，从0-N，那么json_encode之后返回前端之后，那就是数组 其余情况，都会自动被转换成对象。 解决办法：在前端转换一下，把对象装换成数组 self.list = [];for(var i...
el-table筛选后报错"NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before
最新发布
07-23
在使用 `el-table` 进行数据筛选时，出现 `NotFoundError: Failed to execute 'insertBefore' on 'Node'` 错误，通常与 Vue 的响应式机制以及 DOM 操作有关。该错误提示表明浏览器尝试将一个节点插入到某个目标节点...
el-table合计行前置在首行，自定义合计行方法
Are_you_kidding_的博客
06-07 1658
图示表格中，成本、收入、利润可以由列累加得；而利润率不能简单的直接累加，否则会出现利润率越来越高的情况，不符合生活常识和实际情况，因此该列的合计逻辑依然是【利润率 = 利润/收入】el-table原生合计行是在标签内增加show-summary属性，在表尾实现设计合计，且只对表格当前页面显示的列数据进行合计。element-UI效果如下图所示。show-summary显示合计，:summary-method声明使用自定义合计方法。现要求在首行显示合计行，并自定义合计逻辑实现如下效果。
chunk-vendors报错TypeError: Cannot read properties of null (reading 'insertBefore')
12-08
根据提供的引用内容，这个错误可能是由于在服务端渲染时，v-if的值为false，导致DOM元素不存在而引起的。解决方案是将v-if改为v-show替换。具体操作如下： 在模板中将v-if改为v-show： ```html <!-- before --> ...
关于控制台输出Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘insertBefore‘)
热门推荐
qq_32154641的博客
04-26 2万+
这是我自己写代码的时候出现的一个问题，就是当我用elementUI组件，使用下拉框el-select来展示数据的时候，第一次输入，下拉列表出现，你选择一个是正常的，然后你继续选择的时候，当你的鼠标移到这个下拉框上的时候，控制台就报错Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘insertBefore’)，截图如下 然后我看了这个错误看半天，表示自己从没在代码中有写过这些，然后我就去自己百度了下，百度说出现
vue el-table 渲染报错Avoid using non-primitive value as key, use string/number value instead.
lxwy_wxl的博客
03-06 715
项目中想给el-table添加单元格点击事件，对表格数据进行遍历改变对象的值为对象类型时，表格渲染报错。 表格数据如下： 对表格数据遍历如下 问题1，2如下图圈出 把el-table里的row-key改为id.value v-model改为scope.row.data.value 这个报错信息我至少寻找的2小时，网上找的答案大多都是讲是v-for里的key出现了问题，我排查了v-for的key值没有问题之后，根据一些经验找到了这两个问题，记录一下。 ...
js Dom操作table添加行insertBefore
SJZYLC的专栏
10-09 1890
js操作表格，添加行。 1、始终在首行下面插入新行 2、将除了首行外的所有行删除并替换成新行
vue3使用element-plus的el-table组件报错关键字‘emitsOptions‘和‘insertBefore
weixin_45049852的博客
02-20 4434
TypeError: Cannot read properties of null (reading 'insertBefore')和TypeError: Cannot read properties of null (reading 'emitsOptions')
element-ui table 二次封装
轮回千载
01-26 815
结合项目需求，将element ui table进行了二次封装,封装后通用表格配置更方便 使用时，配置table-cols 以及table-data 来设置表格每列 <m-table :load-data="loadData" :is-index="true" :is-selection="true" :table-data="tableData" :table-cols="tableCols" :pagination="pagination"&.
element ui treetable 触发展开事件_DOM事件和事件委托
weixin_34007963的博客
01-16 1368
一、DOM事件DOM事件分为捕获阶段，事件阶段和冒泡阶段。捕获：当用户点击按钮，浏览器会从 window 从上向下遍历至用户点击的按钮，逐个触发事件处理函数。冒泡：浏览器从用户点击的按钮从下往上遍历至 window，逐个触发事件处理函数。W3C 事件模型/事件机制：对每个事件先捕获再冒泡我们可以看到，其执行顺序为，捕获 => 目标 => 冒泡所以，如果用户点击了td元素，并且，td元素...
element ui 的table操作
qq_42628504的博客
01-13 825
element ui table
el-table 合计放入首行和固定列以及表格拖动 都会产生错行的问题
wcb554724933的博客
08-16 739
此时看着还有点覆盖问题 加入样式。那么此时添加表格列宽拖动事件。这里就不写合计的方式了。那么此时就放入第一行了。首先将合计列放入首行。
原样导出el-table展示的数据，需要获取dom元素
qq_58738794的博客
11-14 334
有时候我们的el-table是设计到动态数据的问题，但是我们想要的效果是导出数据表格展示的数据；所以我们需要获取table的原生内容去做导出；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值