Vue ヘッダーの位置がずれている場合の対処方法

vue テーブル ヘッダーの位置がずれている場合の解決策: 1. プロジェクト エントリ ファイルを見つけて、グローバル スタイルを「.el-table th.gutter{display: table-cell! important;}」として追加します。 global style 「body .el-table th.gutter {display: table-cell ! important}」にコードを記述します; 3. マウスホバーを削除して、背景色イベントを変更します。

このチュートリアルの動作環境: Windows 10 システム、vue3 バージョン、DELL G3 コンピューター

vue ヘッダーがずれていますか?

vue element-ui のテーブル内のヘッダーとテーブルの間のずれの解決策

ヘッダーelement-ui の表と表がずれて表示されます 位置ずれ

現象:

#原因: コンピューターのディスプレイのスケーリングが原因、そして、Google ブラウザと 360 ブラウザの両方に Webkit カーネルがあることがわかりました。360 ブラウザは正常に表示されますが、この問題は Google ブラウザでのみ発生します。

解決策

プロジェクト エントリ ファイルを見つけて (黒板に強調!!)、グローバル スタイルを追加します:

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

効果:

見た目はより美しくなります~

element-ui テーブルのスタイルの乱れを調整する方法

element-ui テーブルは vue でカプセル化されており、その後、スロットの挿入や固定位置などを使用すると、スタイルが混乱します。混乱に対するいくつかの解決策を次に示します。

1. 行が整列していません

そのようなコードはグローバル スタイルで記述してください。

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

2.固定固定による高さの問題

次のコードをグローバル スタイルで記述します

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

3. マウスを削除します。ホバーで背景色が変わります。イベント

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

推奨学習: 「vue ビデオ チュートリアル 」

以上がVue ヘッダーの位置がずれている場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。