問題の説明通常、表のヘッダーは折り返されませんが、ビジネス シナリオによっては、ヘッダー内のテキストを折り返す必要がある場合があります。まずは効果図を見てみましょう。 レンダリング 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
序文フィールドの追加は誰でもよく知っていると思います。簡単に記述できます。MySQL テーブルにフィ...
最初にsudo suコマンドを使用して root アカウントに切り替えることをお勧めします。そうしな...
Node.js はクライアントリクエストデータ内の中国語文字化けの問題を解決しますコード例: var...
MySQL データベース インデックスが B+ ツリーを使用する理由をさらに分析する前に、データ構...
以前は、さまざまな理由により、一部のアラームは真剣に受け止められませんでした。最近、休暇中に、すぐに...
目次1. Webshellを書く出力ファイルにシェルを書き込むログファイル書き込みシェル2. U...
1. データベースデータをシミュレートする1-1 データベースとテーブルスクリプトを作成する - v...
docker-compose.yml ファイルで './' 相対パスを許可する バー...
背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...
この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...
1. ハイパーリンクアイコンの仕様とは?<br />ハイパーリンクアイコンの仕様は、「C...
プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...
1. ホットリンクの原則1.1 Webページの準備Web ソース ホスト (192.168.153...
トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...
binlog は、MySQL のすべての DML 操作を記録するバイナリ ログ ファイルです。 bi...