Que faire si l'en-tête Vue est mal aligné

Solution de désalignement de l'en-tête de table Vue : 1. Recherchez le fichier d'entrée du projet et ajoutez le style global comme ".el-table th.gutter{display: table-cell!important;}" 2. Écrivez le code dans le style global It ; est "body .el-table th.gutter {display: table-cell !important}" ; 3. Supprimez le survol de la souris pour modifier l'événement de couleur d'arrière-plan.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version vue3, ordinateur DELL G3

Que dois-je faire si l'en-tête de la vue est mal aligné

Vue element-ui Comment résoudre le désalignement ? de l'en-tête et du tableau dans le tableau dans element-ui

element-ui L'en-tête et le tableau du tableau sont mal alignés

Phénomènes :

Cause : causée par la mise à l'échelle de l'écran de l'ordinateur, et c'était a constaté que le navigateur Google et le navigateur 360 ont tous deux des noyaux de kit Web. Le navigateur 360 s'affiche normalement, mais ce problème ne se produit que dans le navigateur Google.

Solution

Trouvez le fichier d'entrée du projet (accent sur le tableau !!), ajoutez le style global :

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

Effet :

C'est plus agréable à l'œil~

style de table element-ui ajustement du désordre La méthode

encapsule la table element-ui dans la vue, puis utilise des emplacements, un positionnement fixe, etc., ce qui entraîne une confusion dans le style. Voici plusieurs façons de résoudre la confusion

1.

dans le style global Écrivez un code comme celui-ci

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

2. Problème de hauteur causé par une fixation fixe

Écrivez le code suivant dans le style global

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

3. Supprimez le survol de la souris pour modifier l'événement de couleur d'arrière-plan

.

/* 去掉鼠标hover事件 */
/* tr {
    pointer-events: none;
} */

Apprentissage recommandé : " tutoriel vidéo vue》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!