vue3 打包上线后 Cannot read property 'insertBefore' of null报错与处理

·  阅读 54

问题描述:本地开发中没有没有问题,打包上线后,首次加载无问题,切换页面时候报错Cannot read property 'insertBefore' of null,影响另一个页面表格切换空白

出现问题技术栈: vue3 + element-plus

报错如下 image.png

经排查,是html模板中有一些未初始化的数据,发现都是el-table-column组件报错。el-table-column中使用scope时错误写法

scope中调用方法

<el-table-column
  prop="price"
  label="价格">
  <template #default="scope">
    <!-- 错误会报错写法:一开始tableData是[]时, scope.row.price是undefined,直接调用方法会报错 -->
    <div class="one-line">¥{{ scope.row.price.toFixed(2) }}</div>
    
    <!-- 解决 -->
    <div class="one-line">¥{{ scope.row?.price?.toFixed(2) }}</div>
  </template>
</el-table-column>

复制代码

scope中函数

<el-table-column
  label="使用状态">
  <template #default="scope">
    <!-- 错误会报错写法:scope.row.status是undefined -->
    {{ statusFilter(scope.row.status) }}
    
    <!-- 解决 -->
    {{ statusFilter(scope.row) }}
  </template>
</el-table-column>

statusFilter(val) {
    return val === 1? "启用":"停用"; // 错误会报错写法
    return val && val.status === 1 ? "启用" : "停用"; //解决
}
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改