vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與'insertBefore'分析
最近用vue3在做一個(gè)項(xiàng)目的時(shí)候，使用了element-plus中的組件el-table，在本地運(yùn)行的時(shí)候一點(diǎn)錯(cuò)誤也沒(méi)有，但是打包后放到線上環(huán)境就開(kāi)始報(bào)錯(cuò)。TypeError: Cannot read properties of null (reading 'insertBefore')和TypeError: Cannot read properties of null (reading 'emitsOptions')
這種報(bào)錯(cuò)可能存在三種情況。
然后查看代碼的時(shí)候，我這邊應(yīng)該是第三種情況，改過(guò)之后就好啦，非常硬氣的告訴測(cè)試小姐姐，不用測(cè)了直接上。
| 情景 | 解釋 | 解決方案 |
| ① v-if 導(dǎo)致 | 在 v-if 值為 false 時(shí)，如果操作了 v-if 控制的 DOM，可能會(huì)因?yàn)樵?DOM 元素不存在而報(bào)錯(cuò)。 | v-show 替換 v-if |
| ② el-dialog 組件導(dǎo)致 | 默認(rèn)彈框是關(guān)閉的，DOM中沒(méi)有彈框中的內(nèi)容。打開(kāi)彈框再關(guān)閉后，彈框中的 DOM 元素沒(méi)有被銷(xiāo)毀，可能會(huì)因?yàn)椴辉摯嬖诘?DOM 元素而報(bào)錯(cuò)（我的報(bào)錯(cuò)就是由此導(dǎo)致）。 | 給 el-dialog 組件增加 destroy-on-close 屬性 |
| ③ el-table 組件導(dǎo)致 | el-table-column渲染時(shí)報(bào)錯(cuò)，若 scope.row.xx（xx為任意字段值）不存在，對(duì)其直接執(zhí)行 length、toString() 等方法而報(bào)錯(cuò)。 | scope.row.xx?.length |
總結(jié)
到此這篇關(guān)于vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與'insertBefore'分析的文章就介紹到這了,更多相關(guān)vue3 element-plus el-table組件報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue 全局loading組件,需要的朋友可以參考下2018-05-05
詳解Vue 事件驅(qū)動(dòng)和依賴(lài)追蹤
本篇文章主要介紹了詳解Vue 事件驅(qū)動(dòng)和依賴(lài)追蹤 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色
這篇文章主要介紹了Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色效果，首先定義好樣式，利用v-for中的index值，然后綁定樣式來(lái)實(shí)現(xiàn)隔行變色,需要的朋友可以參考下2018-08-08
vue3使用elementPlus進(jìn)行table合并處理的示例詳解
虛擬數(shù)據(jù)中公司下有多個(gè)客戶(hù),公司一樣的客戶(hù),公司列需要合并,客戶(hù)如果一樣也需要合并進(jìn)行展示,所以本文給大家介紹了vue3使用elementPlus進(jìn)行table合并處理的實(shí)例,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
VUE div click無(wú)效的問(wèn)題及解決
這篇文章主要介紹了VUE div click無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
生命周期分為四個(gè)對(duì)子，根據(jù)不同的情況使用不同的函數(shù)，這篇文章主要為大家介紹了這些函數(shù)的使用與區(qū)別，感興趣的小伙伴可以了解一下2023-08-08
vue3中實(shí)現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時(shí)應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯(cuò)誤,安裝后,需在項(xiàng)目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說(shuō)明,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue中如何使用math.js問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue 指令之氣泡提示效果的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
客戶(hù)端（vue框架）與服務(wù)器（koa框架）通信及服務(wù)器跨域配置詳解
本篇文章主要介紹了客戶(hù)端（vue框架）與服務(wù)器（koa框架）通信及服務(wù)器跨域配置詳解，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08