Was tun, wenn der Vue-Header falsch ausgerichtet ist?

Vue-Tabellenkopf-Fehlausrichtung: 1. Suchen Sie die Projekteintragsdatei und fügen Sie den globalen Stil als „.el-table th.gutter{display: table-cell!important;}“ hinzu. 2. Schreiben Sie Code im globalen Stil ist „body .el-table th.gutter {display: table-cell !important}“ 3. Entfernen Sie den Mauszeiger, um das Hintergrundfarbereignis zu ändern.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue3-Version, DELL G3-Computer

Was soll ich tun, wenn der Vue-Header falsch ausgerichtet ist?

Vue element-ui Wie kann die Fehlausrichtung behoben werden? des Kopfes und der Tabelle in der Tabelle in element-ui

element-ui Der Tabellenkopf und die Tabelle sind falsch ausgerichtet

Phänomene:

Ursache: verursacht durch die Skalierung der Computeranzeige, und das war es auch Ich habe festgestellt, dass der Google-Browser und der 360-Browser beide über einen Webkit-Kernel verfügen. Der 360-Browser wird normal angezeigt, dieses Problem tritt jedoch nur im Google-Browser auf.

Lösung

Suchen Sie die Projekteintragsdatei (Schwerpunkt auf der Tafel!!), fügen Sie den globalen Stil hinzu:

.el-table th.gutter{
    display: table-cell!important;
}

Effekt:

Es sieht für das Auge angenehmer aus ~

Element-UI-Tabellenstil Störungsanpassung Die Methode kapselt die Element-UI-Tabelle in Vue und verwendet dann Slots, feste Positionierung usw., was zu Verwirrung im Stil führt. Hier gibt es mehrere Möglichkeiten, die Verwirrung zu lösen. Die Linien sind nicht ausgerichtet

im globalen Stil. Schreiben Sie Code wie diesen.

/* Element-UI 的table 组件出现表格线条不对齐的问题 */
body .el-table th.gutter {
    display: table-cell !important
}

.el-table__fixed-right{
    height: 100% !important;
}

Empfohlenes Lernen: „

Vue-Video-Tutorial

》

Das obige ist der detaillierte Inhalt vonWas tun, wenn der Vue-Header falsch ausgerichtet ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!