vue3 生产环境报Cannot read property 'insertBefore' of null

报错出现场景

本人使用的是vue 3.x UI使用的是element-plus ,开发环境不会报错，打包后 报错

排查后发现都是el-table-column 组件 报错 导致虚拟dom 进行diff算法是报错

错误分析

<el-table-column prop="typeId" align="center" label="类型">
    <template #default="scope">
        <div>
            {{
            	remarkTypeList.filter(v => v.id == scope.row.typeId)[0]?.name   // 数据一开始，这里的下标[0]undefined 
            }}
        </div>
    </template>
</el-table-column>

 <el-table-column prop="attr" width="160" label="报关属性">
     <template #default="scope">  
         <el-select                   
             v-model="scope.row.attr[0].childrenChecked"    																	
             placeholder="请选择" >						
             .....

         </el-select>
     </template>
</el-table-column>
// 一开始 tableData是[]时, 导致 scope.row是{}，.attr就是undefined,后面的自然报错
// 没搞明白tableData是[]时, 为什么位运行scope.row.attr[0].childrenChecked，

 <el-table-column prop="list" label="字段信息">
     <template #default="scope">
         <span>{{ tempFilter(scope.row.field) }}</span>
     </template>
</el-table-column>

 const tempFilter = (field => {    
     let arr = field.split('|')  // 同上 一开始 tableData是[]时, 导致 scope.row.field是undefined，.split 报错
     ...
 }
     // 也没搞明白为什么一开始会走

希望对大家有所帮助

标签：undefined,insertBefore,read,field,报错,scope,null,tableData,row
来源： https://www.cnblogs.com/little-oil/p/15169202.html