el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明

el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明

問題の説明

通常、表のヘッダーは折り返されませんが、ビジネス シナリオによっては、ヘッダー内のテキストを折り返す必要がある場合があります。まずは効果図を見てみましょう。

レンダリング

3種類のコード

コメントを読んでみてください。
デモの場合は、コピーして貼り付けて実行するだけです。

<テンプレート>
  <div class="vueWrap">
    <el-テーブル
      スタイル="幅: 900px"
      :data="テーブル本体"
      国境
      :ヘッダーセルスタイル="{
        背景: '#FAFAFA',
        色: '#333333',
        フォントの太さ: '太字'、
        フォントサイズ: '14px',
      }"
    >
      <el-テーブル列
        タイプ="インデックス"
        label="シリアル番号"
        幅="58"
        align="center"
      </el-table-column> ...

      <!-- ヘッダー折り返し方法 1: ヘッダー スロット メソッドを使用して、ヘッダー テキストを 2 つの div に分割します。div ボックスはブロック要素であるため、2 つの div が折り返され、ヘッダーも折り返されます。この方法は、固定データのヘッダー折り返しに適しています -->
      <el-table-column prop="ツール名" width="180" align="center">
        <テンプレートスロット="ヘッダー">
          <div>ツールボックス</div>
          <div>部品名</div>
        </テンプレート>
        <テンプレート スロット スコープ="スコープ">
          <span>{{ スコープ.行.ツール名 }}</span>
        </テンプレート>
      </el-table-column>

      <el-table-column label="サプライヤー" prop="サプライヤー" width="120" align="center">
      </el-table-column>

      <!-- 表ヘッダーの改行方法 2。方法 1 と比較すると、この方法では /n 改行文字と CSS の空白スペース ブランク スタイル コントロールを使用します -->
      <el-テーブル列
        :label="labelFn()"
        prop="サプライヤー国"
        幅= "180"
        align="center"
      >
      </el-table-column>

      <!-- 表ヘッダーの改行方法 3、動的方法 -->
      <el-テーブル列
        v-for="(item, index) in tableHeader"
        :key="インデックス"
        :label="アイテム.ラベル名"
        :prop="アイテム.propName"
        幅= "180"
        align="center"
        :render-header="レンダリングヘッダー"
      </el-table-column> ...
    </el-table>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
      // 動的データテーブルヘッダーはバックエンドから返される必要があり、改行が必要な箇所はカンマで区切る必要があります。tableHeader: [
        {
          labelName: "モデル001、価格(元)",
          プロパティ名: "typeOne",
        },
        {
          labelName: "モデル002、価格(元)",
          プロパティ名: "typeTwo",
        },
      ]、
      // テーブル本体データ tableBody: [
        {
          id: "2021111101",
          ツール名: "5G サービス",
          サプライヤー:「Huawei」、
          サプライヤー国: "中国",
          タイプ1: "8888888",
          タイプ2: "9999999",
        },
        {
          id: "2021111101",
          ツール名: "6G-SERVER",
          サプライヤー:「中国には明るい未来がある」
          サプライヤー国: "中国",
          タイプ1: "678678678",
          タイプ2: "789789789",
        },
      ]、
    };
  },
  メソッド: {
    ラベル関数() {
      // 必要な場所に改行を追加し、下部に空白スタイルで return `supplier_ncountry` を設定します。
    },

    // Ele.me UI のヘッダー関数レンダリング方法は、ヘッダー スロット メソッドと多少似ています // ヘッダー データ テキストを 2 つに分割し、コンテンツを 2 つの div にレンダリングします (div は自動的に折り返されます)
    レンダリングヘッダー(h, {列, $index }) {
      h("div", {}, [ を返します。
        h("div", {}, 列ラベル分割(",")[0]),
        h("div", {}, 列ラベル分割(",")[1]),
      ]);
    },
    
  },
};
</スクリプト>
<style lang="less" スコープ>
/deep/ .el-table th.el-table__cell > .cell {
  空白: 前;
  // white-space: pre-wrap; // も機能します。
  
}
</スタイル>

空白の詳細についてはここでは触れません。詳細については、公式ドキュメント developer.mozilla.org/zh-CN/docs/Web/CSS/white-space を参照してください。

要約する

3 つの方法にはそれぞれ特徴がありますが、render-header はパフォーマンスを少し消費します。
ヘッダーデータが固定されている場合は、まずヘッダースロット方式を使用し、次に改行と CSS を組み合わせた方式を使用することをお勧めします。
動的データの場合は、ヘッダーのrenderheader関数のみ使用できます。

el-table のヘッダーテキストを折り返す 3 つの方法についての記事はこれで終わりです。el-table のヘッダーテキストを折り返す 3 つの方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • el-tableヘッダーはコンテンツに適応し、ヘッダーのずれや固定列のずれを完全に解決します。
  • vue el-table はカスタム テーブル ヘッダーを実装します
  • VUE2.0+ElementUI2.0 テーブル el-table はヘッダー拡張 el-tooltip を実装します

<<:  HTML のメタタグの簡単な比較

>>:  パーティクルダイナミックボタン効果を実現するCSS

推薦する

Docker イメージのダウンロードが遅すぎる場合の解決策

Docker イメージのダウンロードが停止したり、遅すぎたりするネットでいろいろな方法を検索しました...

アコーディオン効果を実現するJavaScript

この記事では、アコーディオン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

MySQL 8.0 のタイムゾーン問題を解決する手順

ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.16-wi...

MySQLクエリの基本的なクエリ操作の学習

序文MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーショ...

div が iframe に覆われるいくつかの状況とその解決策

類似の構造:コードをコピーコードは次のとおりです。 <div></div>&...

Dockerディスク容量不足の問題を解決する

Docker が配置されているサーバーをしばらく稼働させたところ、サーバーのディスク ディレクトリの...

Nginx で Angular プロジェクトを展開する際の落とし穴

コンパイル後にAngularプロジェクトをNginxにデプロイする方法をオンラインで検索すると、ほと...

Linux 編集の開始、停止、再起動の Springboot jar パッケージ スクリプトの例

序文springboot設定ファイルでは、設定ファイルの名前には独自の意味と用途があります。 dev...

nginxのデフォルトポートを変更する方法の詳細な説明

まず設定ファイルがどこにあるか調べる nginx.confはどこにありますかこれらのディレクトリを調...

Windows 10 での MySQL 8.0.20 のインストールと設定方法のグラフィック チュートリアル

Win10システムにMySQL8.0.20をローカルにインストールし、個人的にテストして利用可能であ...

Vue-CLI マルチページディレクトリパッケージ化手順の記録

ページディレクトリ構造 デフォルトの HTML テンプレート ファイル public/index.h...

ubuntu16.04でNFSサービスを構築する方法

NFS の紹介NFS (ネットワーク ファイル システム) は、FreeBSD でサポートされている...

JS で CSS 変数を使用する方法

JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...

ウェブサイトレイアウトにおける CSS の計算関数 calc の例

calc は数値を計算するために使用される CSS 関数です。長さ、角度、時間などを計算できます。 ...

nginx+uwsgi で Django プロジェクトを開始するための詳細な手順

Django で Web プロジェクトを開発する場合、開発およびテストのプロセスでは Django ...