Perkara yang perlu dilakukan jika pengepala Vue tidak sejajar

Penyelesaian untuk vue table header misalignment: 1. Cari fail kemasukan projek dan tambah gaya global sebagai ".el-table th.gutter{display: table-cell!important;}"; gaya global Tulis kod dalam "body .el-table th.gutter {display: table-cell !important}" 3. Alih keluar tuding tetikus untuk mengubah suai acara warna latar belakang.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi vue3, komputer DELL G3

Apakah yang perlu saya lakukan jika pengepala vue salah diselaraskan?

Penyelesaian kepada salah penjajaran antara pengepala dan jadual dalam jadual dalam elemen vue-ui

Fenomena:

Punca: disebabkan oleh penskalaan paparan komputer, dan didapati bahawa penyemak imbas Google dan pelayar 360 kedua-duanya mempunyai kernel webkit Penyemak imbas 360 dipaparkan secara normal, tetapi masalah ini hanya berlaku dalam pelayar Google.

Penyelesaian

Cari fail kemasukan projek (penekanan pada papan hitam!!), tambah gaya global:

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

Kesan:

Ia kelihatan lebih menyenangkan mata~

Kaedah pelarasan gangguan gaya jadual elemen-ui

Jadual elemen-ui dikapsulkan dalam vue, dan kemudian Penggunaan slot, kedudukan tetap, dsb. membawa kepada kekeliruan dalam gaya Berikut ialah beberapa penyelesaian kepada kekeliruan

1. Baris tidak sejajar

Tulis kod seperti ini dalam gaya global

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

2. Masalah ketinggian disebabkan oleh penetapan tetap

Tulis kod berikut dalam gaya global

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

3. Alih keluar tuding tetikus untuk mengubah suai acara warna latar belakang

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

Pembelajaran yang disyorkan: "tutorial video vue"

Atas ialah kandungan terperinci Perkara yang perlu dilakukan jika pengepala Vue tidak sejajar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!