Lösung für das Problem der Zeilenhöhe der Elementtabellenkopfzeile

Vorwort

Im Hintergrundverwaltungssystem eines aktuellen Projekts wurde beim Schreiben der Front-End-Schnittstelle ElementUI verwendet. Dabei stellte sich jedoch heraus, dass die Höhe der Tabellenüberschrift nach dem Importieren der Datentabelle immer sehr hoch war, wie in der folgenden Abbildung dargestellt:

Ich habe lange im Internet nach Lösungen gesucht, aber ohne Erfolg. Nach viel harter Arbeit habe ich dieses Problem endlich gelöst und hier aufgezeichnet.

Tipp: Das Folgende ist der Hauptinhalt dieses Artikels. Die folgenden Fälle können als Referenz verwendet werden

1. Ursache des Problems

Beim Überprüfen des Codes auf der Webseite habe ich festgestellt, dass es keinen Stil zum Festlegen der Höhe der Tabellenüberschrift gibt. Die Höhe der Überschrift ändert sich nur, wenn das line-height in .el-main angepasst wird.

Der Grund dafür ist, dass auf der Hauptseite der Container -Layout-Container verwendet wird und im Layout-Container line-height des Tags .el-main geändert wird, wodurch die Kopfzeile besonders hoch wird.

2. Lösung

Löschen Sie das line-height im .el-main Tag oder ändern Sie es auf eine geeignete Größe.

Zusammenfassen

Oben ist die Methode zum Ändern der Kopfzeile. Wenn ein Layoutcontainer verwendet wird, überprüfen Sie zuerst den Layoutcontainer und ändern Sie dann die einzelnen Komponenten. Ich habe im Internet schon nach vielen Methoden gesucht, aber keine davon konnte mein aktuelles Problem lösen. In Zukunft muss ich verstehen, wo das Problem liegt, bevor ich es lösen kann.

Vue ändert die Höhe und Hintergrundfarbe der ElementUI-Tabelle tr th

/* Hintergrundfarbe der Tabellenüberschrift festlegen */

.el-table__header th, .el-table__header tr {
Hintergrundfarbe: #17B3A3;

Farbe: Schwarz;

}

/* Höhe des Tabellenkörpers festlegen */

.el-table__body td,.el-table__body th{
Polsterung: 1px;

}

/* Höhe der Tabellenüberschrift festlegen */

.el-table__header td,.el-table__header th{
Polsterung: 6px 0px;

}

/* Pagerhöhe festlegen */

.site-wrapper .el-pagination {
Rand oben: 5px;

Textausrichtung: rechts;

}

.el-pager li.active {
Farbe: #080909;

Cursor: Standard;

Hintergrundfarbe: #17B3A3;

Rahmenradius: 2px;

}

Dies ist das Ende dieses Artikels zur Lösung des Problems der Zeilenhöhe der Elementtabellenüberschrift. Weitere relevante Inhalte zur Zeilenhöhe der Elementtabellenüberschrift finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!