Im Folgenden geht es hauptsächlich um diesen Fehler:
Im vue3-Projekt wird die el-table-Komponente in element-plus verwendet und die Spaltendaten werden über den V-Slot-Slot im el-table-column-Tag gerendert. Beim lokalen Ausprobieren gibt es kein Problem, aber wenn es funktioniert Wird an die Test- und Produktionsumgebung gesendet, wird ein Fehler gemeldet, und die Konsole meldet nicht die spezifische Zeile des Fehlers.
Der Code, der den Fehler verursacht hat:
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>Fehlerpunkt: Während des Renderns stellt der obige Code nicht sicher, ob der KnowledgeNums-Wert unter der Zeile vorhanden ist. Verwenden Sie den optionalen Kettenoperator von js, um das Problem perfekt zu lösen.
Zusammenfassung: Wenn el-table diesen Fehler meldet, wird er daher hauptsächlich durch el-table-column-Renderingfehler verursacht. Bei der Verwendung von Slots müssen Sie zunächst sicherstellen, dass der verwendete Wert vorhanden ist.