以下は主にこのエラーについて説明します。
vue3 プロジェクトでは、element-plus の el-table コンポーネントが使用され、列データは el-table-column タグの v-slot スロットを通じてレンダリングされます。ローカルで試す場合は問題ありませんが、テスト環境と運用環境に送信されると、エラーが報告されますが、コンソールはエラーの特定の行を報告しません。
エラーの原因となったコード:
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>
エラー ポイント: レンダリング中に、上記のコードは行の下のKnowledgeNums 値が存在するかどうかを保証しません。問題を完全に解決するには、js のオプションのチェーン オペレーターを使用します。
概要: したがって、el-table がこのエラーを報告するときは、主に el-table-column レンダリング エラーが原因であり、スロットを使用する場合は、使用されている値が存在することを最初に確認する必要があります。