問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブルを作成することもあります。たとえば、以下の縦の表: このようなレンダリングを見ると、まず頭に浮かぶのは、UI フレームワークを使用していくつかの変更を加え、問題を解決することです。ただし、Ele.me UI はそのような例を直接提供していません。一部の学生は、Ele.me UI の el-table を使用して行と列を結合してこれを実現したい場合があります。実際、これを行うと面倒になります。たとえば、次の行と列が結合されます。 このようなレンダリングでは、必ずしも UI コンポーネントを使用する必要はありません。ネイティブ メソッドを使用して実行できる場合もあります。むしろ便利になります。この記事では、このようなシンプルな垂直テーブルを実装する 2 つの方法を紹介します。実際のシナリオはもっと複雑かもしれませんが、私が言ったように、アイデアさえあれば、大きな問題にはなりません。プログラミングの鍵は考えることです。 方法1(ネイティブメソッド)は推奨されませんアイデアは、テーブルスタイルを自分で描き、フローティングを使用して左から右に配置することです。 <テンプレート> <div id="アプリ"> <ul class="proWrap"> <template v-for="(item, index) in data"> <li class="proItem" :key="index"> <span>{{ item.title }}</span> <span>{{ item.value == "" ? "完了予定" : item.value }}</span> </li> </テンプレート> </ul> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { データ: [ { タイトル:「重要度レベル」、 値: "666", }, { タイトル: 「先行販売状況」、 値: "666", }, { タイトル:「協力状況」 価値: ""、 }, { タイトル: 「先行販売状況」、 価値: ""、 }, { タイトル: 「技術契約ステータス」、 価値: ""、 }, { タイトル: 「落札者」 価値: ""、 }, { タイトル:「協力状況」 価値: ""、 }, { タイトル:「協力フィードバックタイム」 価値: ""、 }, ]、 }; }, メソッド: {}, }; </スクリプト> <style lang="less" スコープ> #アプリ { 幅: 100%; 最小高さ: 100vh; ボックスのサイズ: 境界線ボックス; パディング: 50px; .proラップ{ 幅: 100%; 境界線: 1px 実線 #e9e9e9; 右境界線: 0; 下境界線: 0; // 各行にいくつのグループが配置されるか? ここでは特定の数で割ります。proItem { 幅: 100% / 3; float: left; // 左にフロートします。 スパン { 表示: インラインブロック; 幅: calc(50% - 2px); 高さ: 50px; 行の高さ: 50px; テキスト配置: 中央; 右境界線: 1px 実線 #e9e9e9; 下境界線: 1px 実線 #e9e9e9; } span:n番目の子(1) { 背景: #fafafa; } } // フロートをクリアします。クリアしないと左端の境界線が消えてしまいます。&::after { コンテンツ: ""; 表示: ブロック; クリア: 両方; } } } // liのデフォルトスタイルを削除します{ リストスタイルタイプ: なし; } </スタイル> 方法2(グリッドレイアウトコンポーネントの使用)が推奨されますEle.me に付属するグリッド システムを使用するとより便利です。el-col の :span 属性を制御することで、各行に表示されるグループの数を設定できます。グループがさらに多い場合は、自動的に折り返されます。テーブルのスタイルに関しては、自分で設定できます。この方法は非常に簡単です。添付コード: <テンプレート> <div id="アプリ"> <el-col :span="howWidth" v-for="(item, index) in tableArr" :key="index"> <div class="box"> <div class="content1">{{ item.key }}</div> <div class="content2">{{ item.value == "" ? "完了予定" : item.value }}</div> </div> </el-col> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { テーブルArr: [ { キー: "名前", 値: "孫悟空"、 }, { キー: "年齢", 値: 500、 }, { キー: "高さ"、 価値:「山のように高い」 }, { キー:「性別」、 値: "男性", }, { キー: "アドレス"、 価値:「花果山の水幕洞窟」、 }, { キー:「教育」、 値: "Tian Ting Bi Ma Wen の学歴", }, { キー: 「機能」、 値: "強い"、 }, { キー: "ニックネーム", 価値:「偉大な賢者」、 }, ]、 幅: 8, }; }, メソッド: {}, }; </スクリプト> <style lang="less" スコープ> #アプリ { 幅: 100%; 最小高さ: 100vh; ボックスのサイズ: 境界線ボックス; パディング: 50px; 。箱 { 幅: 100%; 高さ: 40px; ディスプレイ: フレックス; 左境界線: 1px 実線 #e9e9e9; 上境界線: 1px 実線 #e9e9e9; .content1 { 幅: 40%; 高さ: 40px; 行の高さ: 40px; テキスト配置: 中央; 背景色: #fafafa; 右境界線: 1px 実線 #e9e9e9; 下境界線: 1px 実線 #e9e9e9; 色: #333; フォントサイズ: 14px; } .content2 { 幅: 60%; 高さ: 40px; 行の高さ: 40px; テキスト配置: 中央; 背景色: #fff; 右境界線: 1px 実線 #e9e9e9; 下境界線: 1px 実線 #e9e9e9; 色: #b0b0b2; フォントサイズ: 14px; } } } </スタイル> これで、Vue プロジェクトで垂直テーブルを実装する 2 つの方法の分析に関するこの記事は終了です。Vue の垂直テーブルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL ベースのストレージエンジンとログの説明 (包括的な説明)
>>: vmware workstation12 インストール CentOS プロンプト VMware Player と Device/Credential Guard に互換性がない、理由と解決策
1 ストアドプロシージャ1.1 ストアドプロシージャとは何かストアド プロシージャは、特定の機能を実...
目次Vueプロジェクトのパッケージ化、起動、最適化Vueプロジェクトのパッケージ化プロジェクトホステ...
目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...
目次1. JavaScriptで配列を作成する方法2. 配列メソッドの概要3. 方法の詳細な説明1....
導入:従来の画像検証コードと比較して、スライダー検証コードには次の利点があります。サーバーは検証コー...
昨年末、Thinkpad T450 のデュアルシステムの opensuse を Manjaro に置...
目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...
シンプルなSpring Boot Webプロジェクトを作成するアイデア ツールを使用して、Sprin...
目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...
序文React 16から、子コンポーネントで発生したエラーを捕捉し、エラーログを記録し、ダウングレー...
目次1 Java環境の設定2 tomcatのインストールと展開Tomcat をインストールして展開す...
フロントエンド ページの需要が増加し続けるにつれて、一部のシーンではグラデーションの背景要素が必要に...
Linux のデフォルトの ssh リモート ポートは 22 です。デフォルトのポートは、悪意のある...
MYSQLバージョン:MySQL Community Server 5.7.17、インストール不要版...
npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...