要素テーブルヘッダー行の高さの問題の解決

序文

最近のプロジェクトのバックグラウンド管理システムでは、フロントエンド インターフェイスの作成時に ElementUI が使用されていましたが、次の図に示すように、データ テーブルをインポートした後、テーブル ヘッダーの高さが常に非常に高くなることがわかりました。

ウェブ上で解決策をたくさん検索しましたが、役に立ちませんでした。大変な努力の末、ようやくこの問題を解決し、ここに記録しました。

ヒント：以下はこの記事の主な内容です。以下のケースを参考にしてください。

1. 問題の原因

Web ページのコードを確認したところ、テーブル ヘッダーの高さを設定するスタイルがないことがわかりました。ヘッダーの高さは.el-mainのline-height属性を調整した場合にのみ変更されます。

その理由は、メインページでContainerレイアウト コンテナーが使用されており、レイアウト コンテナー内で.el-mainタグのline-height属性が変更されているため、ヘッダーが特に高くなっているからです。

2. 解決策

.el-mainタグのline-height属性を削除するか、適切なサイズに変更します。

要約する

上記はヘッダーを変更する方法です。レイアウト コンテナーを使用する場合は、まずレイアウト コンテナーを確認してから、単一のコンポーネントを変更します。これまでインターネットでさまざまな方法を検索しましたが、現在の問題を解決できる方法はありませんでした。今後は、問題を解決する前に問題がどこにあるのかを理解する必要があります。

VueはelementUIテーブルtr thの高さと背景色を変更します

/* テーブルヘッダーの背景色を設定します */

.el-table__header th、.el-table__header tr {
背景色: #17B3A3;

色: 黒;

}

/* テーブル本体の高さを設定します */

.el-table__body td、.el-table__body th{
パディング:1px;

}

/* テーブルヘッダーの高さを設定します */

.el-table__header td、.el-table__header th{
パディング:6px 0px;

}

/* ページャーの高さを設定する */

.サイトラッパー .el-ページネーション {
上マージン: 5px;

テキスト配置: 右;

}

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

カーソル: デフォルト;

背景色: #17B3A3;

境界線の半径: 2px;

}

Element テーブル ヘッダー行の高さの問題を解決するこの記事はこれで終わりです。Element テーブル ヘッダー行の高さに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。