Vue プロジェクトで垂直テーブルを 2 つの方法で実装するアイデアの分析

Vue プロジェクトで垂直テーブルを 2 つの方法で実装するアイデアの分析

問題の説明

私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブルを作成することもあります。たとえば、以下の縦の表:

このようなレンダリングを見ると、まず頭に浮かぶのは、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue+Element カスタム垂直テーブルヘッダーチュートリアル

<<:  MySQL ベースのストレージエンジンとログの説明 (包括的な説明)

>>:  vmware workstation12 インストール CentOS プロンプト VMware Player と Device/Credential Guard に互換性がない、理由と解決策

推薦する

MySQL ストアドプロシージャとストアドファンクションの詳細な説明

1 ストアドプロシージャ1.1 ストアドプロシージャとは何かストアド プロシージャは、特定の機能を実...

Vue プロジェクトのパッケージ化と最適化の実装手順

目次Vueプロジェクトのパッケージ化、起動、最適化Vueプロジェクトのパッケージ化プロジェクトホステ...

JavaScript JSON.stringify() の使用法の概要

目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...

JavaScript配列の一般的なメソッドの概要

目次1. JavaScriptで配列を作成する方法2. 配列メソッドの概要3. 方法の詳細な説明1....

Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法

導入:従来の画像検証コードと比較して、スライダー検証コードには次の利点があります。サーバーは検証コー...

Manjaro インストール CUDA 実装チュートリアル分析

昨年末、Thinkpad T450 のデュアルシステムの opensuse を Manjaro に置...

Vue における属性とプロパティの具体的な使用法と違い

目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...

DockerでJavaプログラムを起動する方法

シンプルなSpring Boot Webプロジェクトを作成するアイデア ツールを使用して、Sprin...

2列の水平タイムラインを実装するためのVueサンプルコード

目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...

最も単純な ErrorBoundary コンポーネントをカプセル化して、React 例外を処理する

序文React 16から、子コンポーネントで発生したエラーを捕捉し、エラーログを記録し、ダウングレー...

Windows 10 での Tomcat のインストールと展開に関する詳細なチュートリアル

目次1 Java環境の設定2 tomcatのインストールと展開Tomcat をインストールして展開す...

div+css3 を使用して背景グラデーション ボタンを実装するためのサンプル コード

フロントエンド ページの需要が増加し続けるにつれて、一部のシーンではグラデーションの背景要素が必要に...

Linux sshのデフォルトのリモートポート番号を変更する6つの手順

Linux のデフォルトの ssh リモート ポートは 22 です。デフォルトのポートは、悪意のある...

MySQL 5.7.17無料インストール版のインストールと設定

MYSQLバージョン:MySQL Community Server 5.7.17、インストール不要版...

MacでNodeとnpmを完全にアンインストールする方法

npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...