この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: LinuxカーネルとSVNバージョン間の競合の解決策
>>: MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]
この記事では、WeChatアプレットがSMS認証コードのカウントダウンを送信するための具体的なコード...
プロットレビュー前回の記事では、ロケーション命令の解析プロセスを分析しました。この内容を簡単に確認し...
MySQL 5.7.13 Mac用インストールチュートリアル、非常に詳細で、以下のように記録されてい...
目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...
mha4mysql をインストールする場合の手順は、おおよそ次のようになります: unzip、per...
この記事では、テーブル内のデータを追加、削除、変更するためのvue要素の具体的なコードを参考までに共...
1. 表示効果: 2、HTML構造 <div class="プロセスリスト-lpu...
この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
テスト サーバーにログインするたびに、必ず ssh ログインのパスワードを入力する必要があります。ロ...
目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...
1. 準備1.1 Pythonインストールパッケージをダウンロードします(注:Pythonバージョン...
目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...
まず、いくつかの概念を明確にします。 JDBC: Javaデータベース接続、Oricalによって規定...
まず、 esp8266 は mqtt を通じてメッセージを公開し、WeChat アプレットは mqt...
日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...