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

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

序文

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

ここに画像の説明を挿入

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

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

1. 問題の原因

Web ページのコードを確認したところ、テーブル ヘッダーの高さを設定するスタイルがないことがわかりました。ヘッダーの高さは.el-mainline-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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 要素 el-table テーブルの二次カプセル化 (テーブルの高さの調整付き)
  • vue+elementUI でのテーブルの強調表示またはフォント色の変更操作
  • element-ui テーブルのチェックボックスをオンにして現在の行を強調表示する詳細な説明
  • Vue+elementUIはテーブルキーワードのフィルタリングと強調表示を実現します
  • VUE2.0 ElementUI2.0 テーブル el-table 適応高さ実装方法

<<:  MySQLの結合クエリ、ユニオンクエリ、サブクエリの原理と使用例の詳細な説明

>>:  Pagoda Panel のインストール時にサーバーがデータベースにリモート接続できない問題の解決策

推薦する

単一行関数と文字計算日付プロセス制御を説明する MySQL の例

目次1. キャラクター機能1. ケースコントロール機能2. キャラクターコントロール機能2. 数学関...

Apache Flink の任意の Jar パッケージのアップロードにより、リモート コード実行の脆弱性が再発する問題が発生する (脆弱性警告)

脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...

Vue3の状態管理の使用方法の詳細な説明

目次背景提供/注入共有状態の抽出データを提供するデータの挿入まとめ反応的な共有状態の抽出共有状態の使...

MySQLのレプリケーションとチューニングの原則と方法を分析する

1. はじめにMySQL にはレプリケーション ソリューションが付属しており、次のような利点がありま...

Windows 10 で MySql の解凍バージョンをインストールして構成する方法のチュートリアル

Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...

ボタンを使用してフォームを送信する代わりに、画像を使用してフォームを送信します。

コードをコピーコードは次のとおりです。 <フォームメソッド="post" ...

CentOS8 Linux 8.0.1905 のインストール手順(図解)

現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....

Svelte の Defer Transition を Vue で実装する方法

最近、Rich Harris の <Rethinking Reactivity> ビデオ...

HTML マーキータグの使用例

このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルのみをサポートしています。そのため、...

JavaScript配列についてさらに詳しく知るのに役立つ記事

目次1. 配列の役割: 2. 配列の定義: 1. コンストラクタを通じて配列を作成する2. リテラル...

MySQL統計データテーブルの設計方法

目次リアルタイム更新は必要ですか?マテリアライズド ビュー ツール (Flexviews)カウントテ...

Dockerのセキュリティについて Docker-TLS暗号化通信の問題

目次1. Dockerのセキュリティ問題2. Dockerアーキテクチャの欠陥とセキュリティメカニズ...

Linux システムの最適化 (カーネルの最適化) に関するいくつかの提案

スワップを無効にするサーバーがデータベース サービスまたはメッセージ ミドルウェア サービスを実行し...

JavaScript スネーク実装コード

この記事の例では、参考までに貪欲なスネークを実装するためのJavaScriptの具体的なコードを共有...

Dockerコンテナを使用してホストネットワークにアクセスする方法

最近、nginx をリバース プロキシとして使用し、docker で nginx を実行するシステム...