报错出现场景
本人使用的是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 报错
...
}
// 也没搞明白为什么一开始会走
希望对大家有所帮助