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

最新推荐文章于 2024-07-16 09:50:52 发布
最新推荐文章于 2024-07-16 09:50:52 发布
阅读量330 收藏
点赞数
分类专栏： 前端框架 文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzyleix97/article/details/127103476
版权
本文探讨了在前端开发中遇到的el-table渲染问题及el-dialog弹窗的优化策略。建议将v-if替换为v-show以提升性能，并介绍如何设置el-dialog的关闭销毁属性以解决弹窗渲染问题。同时，提醒开发者注意在使用数据时进行数据存在性检查，例如scope.row.name?.name，以防止未定义的数据导致的错误。
摘要由CSDN通过智能技术生成

报错场景

图一

其他可能问题

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 4395
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 2943
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
关于Element UI 里table表格的操作
zhualao的博客
05-06 772
关于Element UI 里table表格的操作：增删改查，批量删除，批量修改。找到一篇文章，写的不错，给大家参考参考。 原文链接：https://blog.csdn.net/weixin_43216105/article/details/89187867
el-table-column组件，生产环境报Cannot read property ‘insertBefore‘ of null
一枚小前端
01-06 1767
原作者对这个问题解释的链接：点这里跳转 数据一开始，这里的下标[0]undefined <el-table-column prop="typeId" align="center" label="类型"> <template #default="scope"> <div> {{ remarkTypeList.filter(v => v.id == scope.row.typeId)[0]?.na
element 表格打包部署报错Cannot read properties of null (reading ‘insertBefore‘)
weixin_57011137的博客
03-08 2586
原因可能是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 741
在这个组件中 el-table必须使用数组，不能是对象 但是这里有个问题，我后台PHP返回的明明是数组，怎么在前端被转换成对象了? 经过测试发现问题，我传送的数据是多维数组，如果数组下标是按顺序，从0-N，那么json_encode之后返回前端之后，那就是数组 其余情况，都会自动被转换成对象。 解决办法：在前端转换一下，把对象装换成数组 self.list = [];for(var i...
关于控制台输出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’)，截图如下 然后我看了这个错误看半天，表示自己从没在代码中有写过这些，然后我就去自己百度了下，百度说出现
Vue3 - 解决报错 Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘insertBefore‘)
王佳斌
07-16 3859
vue3，nuxt3，无法读取null的属性（读取“insertBefore”），vue3 insertBefore，报错，Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘insertBefore‘)，详细解决，v-if 导致，v-show，渲染时报错，dom元素，改变时报错，组件，插件，vue版本升级，依旧报错，还是不行，改了还报错，点击按钮展示弹框报错，本地启动时，页面所有操作正常，显示正常；部署到生产环
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 --> ...
manipulating-dom-for-beginners:训练DOM操作的基本概念
03-11
1. **DOM结构**：DOM树是由节点构成的，每个HTML元素、属性、文本甚至注释都是一个节点。根节点通常是`<html>`元素，包含了`<head>`和`<body>`等子节点。理解这个结构有助于定位和操作页面上的特定元素。 2. **访问...
vue el-table 渲染报错Avoid using non-primitive value as key, use string/number value instead.
lxwy_wxl的博客
03-06 646
项目中想给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 1780
js操作表格，添加行。 1、始终在首行下面插入新行 2、将除了首行外的所有行删除并替换成新行
vue3使用element-plus的el-table组件报错关键字‘emitsOptions‘和‘insertBefore
weixin_45049852的博客
02-20 3772
TypeError: Cannot read properties of null (reading 'insertBefore')和TypeError: Cannot read properties of null (reading 'emitsOptions')
element-ui table 二次封装
轮回千载
01-26 753
结合项目需求，将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 1311
一、DOM事件DOM事件分为捕获阶段，事件阶段和冒泡阶段。捕获：当用户点击按钮，浏览器会从 window 从上向下遍历至用户点击的按钮，逐个触发事件处理函数。冒泡：浏览器从用户点击的按钮从下往上遍历至 window，逐个触发事件处理函数。W3C 事件模型/事件机制：对每个事件先捕获再冒泡我们可以看到，其执行顺序为，捕获 => 目标 => 冒泡所以，如果用户点击了td元素，并且，td元素...
element ui 的table操作
qq_42628504的博客
01-13 760
element ui table
el-table 合计放入首行和固定列以及表格拖动 都会产生错行的问题
wcb554724933的博客
08-16 626
此时看着还有点覆盖问题 加入样式。那么此时添加表格列宽拖动事件。这里就不写合计的方式了。那么此时就放入第一行了。首先将合计列放入首行。
2、关于Element-UI Table表格组件的二次封装
mai0824的博客
11-15 451
element 表格封装
Cannot read properties of null (reading ‘insertBefore‘)和(reading ‘emitsOptions‘)
SunFlower914的博客
07-11 2144
页面报错TypeError: Cannot read properties of null (reading 'insertBefore')及TypeError: Cannot read properties of null (reading 'emitsOptions')。在本地无异常，发测试或生产后会报这个错误，是在vue3项目中使用了el-table这个插件后，el-table-column又没有正常渲染导致的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值