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

推薦する

MySQL の大きなデータ テーブルにフィールドを追加する方法

序文フィールドの追加は誰でもよく知っていると思います。簡単に記述できます。MySQL テーブルにフィ...

Linux jdk のインストールと環境変数の設定チュートリアル (jdk-8u144-linux-x64.tar.gz)

最初にsudo suコマンドを使用して root アカウントに切り替えることをお勧めします。そうしな...

Node.js はクライアントリクエストデータ内の中国語文字化けの問題を解決します

Node.js はクライアントリクエストデータ内の中国語文字化けの問題を解決しますコード例: var...

MySQL データベース インデックスが B+ ツリーの使用を選択するのはなぜですか?

MySQL データベース インデックスが B+ ツリーを使用する理由をさらに分析する前に、データ構...

MySQL のスローログ監視の誤報問題の分析と解決

以前は、さまざまな理由により、一部のアラームは真剣に受け止められませんでした。最近、休暇中に、すぐに...

MySQL 権限昇格のさまざまな形態の概要

目次1. Webshel​​lを書く出力ファイルにシェルを書き込むログファイル書き込みシェル2. U...

MySQLインデックスベースのストレステストの実装

1. データベースデータをシミュレートする1-1 データベースとテーブルスクリプトを作成する - v...

MySQLの大規模テーブル最適化ソリューションについての簡単な説明

背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...

エレメントアバターアップロード練習

この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...

ハイパーリンクアイコンの仕様: 記事の読みやすさを向上

1. ハイパーリンクアイコンの仕様とは?<br />ハイパーリンクアイコンの仕様は、「C...

ブートストラップ学習体験のまとめ - CSS スタイル デザイン共有

プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...

nginx ウェブサイト サービスのアンチホットリンクを設定する方法 (推奨)

1. ホットリンクの原則1.1 Webページの準備Web ソース ホスト (192.168.153...

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...

MySQL binlog の使用方法の詳細な説明

binlog は、MySQL のすべての DML 操作を記録するバイナリ ログ ファイルです。 bi...