1. Problembeschreibung
Als ich an dem Projekt arbeitete, habe ich die el-table-Komponente zweimal gekapselt, aber als ich wollte, dass die Höhe der Tabelle mit zunehmendem Inhalt zunimmt, verursachten leere Daten das Problem, dass die Seitenhöhe auf unbestimmte Zeit zunahm.
2. Problemanalyse
Ich habe viele Artikel überprüft und die meisten sagten, dass der äußere Flex verursacht wurde, aber ich habe hier nicht das Flex-Layout verwendet, und einige sagten, dass die Positionierung hinzugefügt werden sollte, um das Problem zu lösen. Ich habe es persönlich versucht, aber das war der Fall Erfüllt nicht die Erwartungen. Wirkung.
Tatsächlich ist die Lösung für dieses Problem sehr einfach. Da das Feld „el-table__empty-block“ keine Höhe hat, kann die Seite es nicht erkennen. Es wird standardmäßig die maximale Höhe verwendet. Und weil die Höhe Ihrer Tabelle mit dem Inhalt höher wird dehnt sich aus, also führt dies zu einer unendlichen Höhenzunahme.
3. Lösung
1. Sowohl height als auch max-height auf el-table wird ein Wert von 100 % zugewiesen, sodass sich die Höhe mit dem Inhalt ändert.
<el-table height="100%" max-height="100%"></el-table>
2. Geben Sie dem Feld el-table__empty-block eine Standardhöhe
.el-table__empty-block {
height: 525px !important;
}
3. Blenden Sie die vertikale Bildlaufleiste aus
.el-table__body-wrapper .is-vertical {
display: none;
}