The following mainly talks about this error:
In the vue3 project, the el-table component in element-plus is used, and the column data is rendered through the v-slot slot in the el-table-column tag. There is no problem when trying it locally, but when it is sent to the test and production environments, it An error will be reported, and the console does not report the specific line of the error.
The code that caused the error:
el-table-column
v-for="(item, index) in columnData"
:key="index"
:fixed="item.fixed"
:label="item.label"
:width="item.width"
:min-width="item.minWidth"
:align="item.align || 'center'"
show-overflow-tooltip
><template v-slot="{ row }">
<div v-if="item.prop.includes('knowledgeNums')">
{
{ row?.knowledgeNums[item.prop.split(".")[1]] }}
</div>
</template>
</el-table-column>Error point: During rendering, the above code does not ensure whether the knowledgeNums value under the row exists. Use the optional chain operator of js to solve the problem perfectly.
Summary: Therefore, when el-table reports this error, it is mostly caused by el-table-column rendering errors. When using slots, you must first ensure that the value used exists.