Vue 開発ツリー構造コンポーネント (コンポーネント再帰)

Vue 開発ツリー構造コンポーネント (コンポーネント再帰)

この記事では、Vue開発ツリー構造コンポーネントの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

必要

ページには製品カテゴリが表示され、各カテゴリには複数のサブカテゴリが含まれ、サブカテゴリにもサブカテゴリが含まれる場合があります。

すべてを単一選択するには、サブクラスを 1 つずつ選択し、親クラスも選択済みとしてマークする必要があります。

最初の反応はツリー構造と再帰呼び出しです。私がWPFに取り組んでいた頃は、既成のコンポーネントがあり、それに対応する背景を書くことも学んだことを覚えています。今回はフロントエンドコンポーネントを自分で書いてみます。

これは私が時間をかけて書いた、最適化および拡張可能な Vue コンポーネントです。これを皆さんと共有します。

効果

成し遂げる

<テンプレート>
  <div id="ツリーメニュー">
    <div v-for="(node, index) ノード内" :class="{'TreeMenu-row-border-bottom': !depth}">
      <div class="ツリーメニュー行">
        <img class="TreeMenu-row-selectimg" src="../assets/img/MembersPriceActivity/selected.png" @click="selectNode(0,node)" v-show="node.IsSelected"/>
        <img class="TreeMenu-row-selectimg" src="../assets/img/MembersPriceActivity/select.png" @click="selectNode(1,node)" v-show="!node.IsSelected"/>
        <div class="TreeMenu-row-firstdiv" :class="{'TreeMenu-row-border-bottom': node.ChildTypeList&&node.IsExpanded }" @click="expandNode(!node.IsExpanded,node)">
          <label v-text="ノード名"></label>
          <img class="TreeMenu-row-arrowimg" src="../assets/img/MembersPriceActivity/top.png" v-if="node.ChildTypeList" v-show="!node.IsExpanded">
          <img class="TreeMenu-row-arrowimg" src="../assets/img/MembersPriceActivity/down.png" v-if="node.ChildTypeList" v-show="node.IsExpanded">
        </div>
        <ツリーメニュー :nodes="node.ChildTypeList" :fatherIndex="index" :depth="depth+1" v-on:selectFatherNode="selectFatherNode" v-if="node.ChildTypeList" v-show="!node.IsExpanded"></ツリーメニュー>
      </div>
    </div>
  </div>
</テンプレート>

js:

<スクリプト>
  エクスポートデフォルト{
    名前: 'ツリーメニュー',
    データ () {
      戻る {
        商品タイプ: {
          ID: ''、
          親ID: ''、
          名前: ''、
          コード: ''、
          レベル: 0,
          画像URL: null、
          子タイプリスト: []
        }
      }
    },
    小道具: {
      ノード: {
        タイプ: 配列、
        デフォルト: () => {
          戻る []
        }
      },
      父親インデックス: {
        タイプ: 数値、
        デフォルト: 0
      },
      深さ:
        タイプ: 数値、
        デフォルト: 0
      }
    },
    時計: {}、
    作成された() {}、
    マウントされた(){}、
    破壊されました () {},
    メソッド: {
      // 現在のノードを選択/キャンセルする selectNode (choice, node) {
        node.IsSelected = 選択
        this.selectChildrenNode(選択肢、node.ChildTypeList || [])
        this.$emit('selectFatherNode', choice, this.fatherIndex, this.nodes.every((node) => { return node.IsSelected === choice }))
      },
      // 子ノードの選択状態を変更する selectChildrenNode (choice, nodes, self) {
        _self = self || this とします
        nodes.forEach((node) => { node.IsSelected = choice; _self.selectChildrenNode(choice, node.ChildTypeList || [], _self) })
      },
      // 選択された状態を親ノードとして変更する必要があるかどうかを確認します (子ノードの呼び出しのみ)
      selectFatherNode (選択肢、インデックス、子供の状態) {
        (選択)の場合{
          // [Index]ノードの下にあるすべての子ノードが選択されている場合、[Index]ノードが選択される必要があります if (childrenState) {
            this.nodes[index].IsSelected = 選択
            this.$emit('selectFatherNode', choice, this.fatherIndex, this.nodes.every((node) => { return node.IsSelected === choice }))
          }
        } それ以外 {
          // [Index] ノードの下の子ノードが選択されていない場合、[Index] ノードは選択解除される必要があります this.nodes[index].IsSelected = choice
          this.$emit('selectFatherNode', 選択肢, this.fatherIndex, false)
        }
      },
      // 現在のノードを展開/折りたたむ expandNode (choice, node) {
        node.IsExpanded = 選択肢
        (!選択肢)の場合{
          this.expandChildrenNode(選択肢、ノード.ChildTypeList)
        }
      },
      // 子ノードを折りたたむ expandChildrenNode (choice, nodes, self) {
        _self = self || this とします
        nodes.forEach((node) => { node.IsExpanded = choice; _self.expandChildrenNode(choice, node.ChildTypeList || [], _self) })
      }
    }
  }
</スクリプト>

CS: ...

<style lang="scss" スコープ>
  #ツリーメニュー {
    .TreeMenu-row{
      左マージン: 30px;
      フォントサイズ: 15px;
      パディング: 12px 0 0 0;
    }
    .TreeMenu-row-firstdiv{
      高さ: 32px;
      左マージン: 30px;
    }
    .TreeMenu-row-arrowimg{
      フロート: 右;
      右マージン: 15px;
      幅: 13px;
    }
    .TreeMenu 行選択{
      フロート: 左;
      幅: 18px;
      垂直配置: テキスト下部;
    }
    .TreeMenu-row-border-bottom{
      下境界線: 実線 1px #e6e6e6;
    }
    .TreeMenu-行-境界線-上{
      上境界線: 実線 1px #e6e6e6;
    }
  }
</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ツリー メニューを実装するための Vue.js 再帰コンポーネント (例の共有)
  • Vue.js コンポーネント ツリーは無制限レベルのツリー メニューを実装します
  • Vuejsは再帰コンポーネントを使用してツリーディレクトリを実装します
  • Vueコンポーネントツリーはツリーメニューを実装します
  • Vue2 コンポーネントツリーは無制限レベルのツリーメニューを実装します
  • Vueのツリー選択コンポーネントに基づくサンプルコード
  • Vue.js の再帰コンポーネントを使用して折りたたみ可能なツリー メニューを実装する (デモ)
  • オブジェクト配列データループをツリー構造に実現するための Vue コンポーネント テンプレート フォーム (サンプル コード)
  • ツリーメニューを実装するための Vue2 再帰コンポーネント
  • ツリーメニューを構築するための Vue.js 再帰コンポーネント

<<:  LinuxカーネルとSVNバージョン間の競合の解決策

>>:  MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]

推薦する

MySQL は低速クエリを可能にします (EXPLAIN SQL ステートメントの使用の概要)

今日、データベース操作はますますアプリケーション全体のパフォーマンスのボトルネックになりつつあり、こ...

Oracle Rownum 書き込みに似た MySQL の詳細な例

Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...

MySQLデータベース最適化技術の簡単な紹介

成熟したデータベース アーキテクチャは、最初から高可用性、高スケーラビリティなどの機能を備えて設計さ...

フロートとBFCをクリアするCSSメソッド

イギリスBFC: ブロック書式設定コンテキストBFCレイアウトルール内箱は縦方向に次々に配置されます...

Tomcat コアコンポーネントとアプリケーションアーキテクチャの詳細な説明

目次Web コンテナとは何ですか? HTTP の性質HTTP リクエスト応答の例クッキーとセッション...

JavaScript の重要なブレークポイント デバッグ手法の概要 (推奨)

目次デバッガーを使用する理由は何ですか? Chromeデバッガーの基本的な使い方VS Code によ...

MySQL 8.0.12 のインストールと環境変数の設定チュートリアル (Win10 の場合)

Windows 10 プラットフォームでの MySQL のインストール、構成、起動、ログイン、環境...

SecureCRT に基づくリモート Linux ホストへのファイルのアップロードとダウンロードのグラフィカルな手順

wget や curl ツールを使用して、Linux サーバーで大規模なネットワーク ファイルを直接...

MySQL と Golan 間の従来の分散トランザクションのための 7 つのソリューション

目次1. 基本理論1.1 取引1.2 分散トランザクション2. 分散トランザクションソリューション2...

WeChatミニプログラムビデオ集中砲火位置ランダム

この記事では、WeChatミニプログラムのビデオ弾幕の位置をランダム化するための具体的なコードを紹介...

MySQL エラー: ロックを取得しようとしたときにデッドロックが見つかりました。トランザクションの解決策を再起動してください

問題を見つける最近、以前のデータを入力していたときに、プログラムが突然次のエラーを報告しました。 [...

HTML で余分なテキストを省略記号に変換する方法

HTML で余分なテキストを省略記号として表示したい場合は、いくつかの方法があります。 1行テキスト...

Vue グローバルメソッドを設定する 2 つの方法

目次1. はじめに2. 最初の方法3. 2番目の方法要約する1. はじめにVue プロジェクトの開発...

MySQL 8.0.17 インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.17のインストールグラフィックチュートリアルを紹介します...

MySQL ユーザー権限管理の分析例

この記事では、MySQL ユーザー権限管理の例について説明します。ご参考までに、詳細は以下の通りです...