el-table ヘッダーでテキストを折り返す 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; // も機能します。
  
}
</スタイル>