問題の説明通常、表のヘッダーは折り返されませんが、ビジネス シナリオによっては、ヘッダー内のテキストを折り返す必要がある場合があります。まずは効果図を見てみましょう。 レンダリング 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 はパフォーマンスを少し消費します。 el-table のヘッダーテキストを折り返す 3 つの方法についての記事はこれで終わりです。el-table のヘッダーテキストを折り返す 3 つの方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
Docker イメージのダウンロードが停止したり、遅すぎたりするネットでいろいろな方法を検索しました...
この記事では、アコーディオン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.16-wi...
序文MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーショ...
類似の構造:コードをコピーコードは次のとおりです。 <div></div>&...
Docker が配置されているサーバーをしばらく稼働させたところ、サーバーのディスク ディレクトリの...
コンパイル後にAngularプロジェクトをNginxにデプロイする方法をオンラインで検索すると、ほと...
序文springboot設定ファイルでは、設定ファイルの名前には独自の意味と用途があります。 dev...
まず設定ファイルがどこにあるか調べる nginx.confはどこにありますかこれらのディレクトリを調...
Win10システムにMySQL8.0.20をローカルにインストールし、個人的にテストして利用可能であ...
ページディレクトリ構造 デフォルトの HTML テンプレート ファイル public/index.h...
NFS の紹介NFS (ネットワーク ファイル システム) は、FreeBSD でサポートされている...
JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...
calc は数値を計算するために使用される CSS 関数です。長さ、角度、時間などを計算できます。 ...
Django で Web プロジェクトを開発する場合、開発およびテストのプロセスでは Django ...