Vueのvue-tree-colorコンポーネントの組織構造図の事例を詳しく解説

Vueのvue-tree-colorコンポーネントの組織構造図の事例を詳しく解説

ネプ

# npm を使用する
npm インストール vue-tree-color

ローダーをインストールする

npm インストール --save-dev less less-loader

プラグインのインポート

'vue' から Vue をインポートします
'vue-tree-color' から Vue2OrgTree をインポートします
 
Vue.use(Vue2OrgTree)

始める

コンポーネントがインストールされているので、そのまま使用できます。Vueページでは、コンポーネントタグを直接使用してデータを動的にバインドします(データは再帰データでもかまいません)

<vue2-org-tree :data="データ"/>

データはページ内に配置される

データ data では、id は要素ごとに異なる ID、label は名前、children は独自のサブセット データです。

配置

先ほどはデフォルトの配置を見ましたが、水平配置もあります。

# 水平方向の <vue2-org-tree :data="data" :horizo​​ntal="true" /> を追加するだけです

効果は以下のとおりです

折りたたみディスプレイ

プロパティ折りたたみ可能を追加する

<vue2-org-tree :data="データ" :horizo​​ntal="true" 折りたたみ可能 /> 

どのように拡張するか?独自のメソッドを持つコンポーネントを追加する必要があります

拡大中

<vue2-org-tree :data="data" :horizo​​ntal="true" 折りたたみ可能 @on-expand="onExpand" />

js部分

メソッド: {
    折りたたむ(リスト) {
        var _this = これ
        list.forEach(関数(子) {
            if (child.expand) {
                子.展開 = false
            }
            child.children && _this.collapse(child.children)
        })
    },
    onExpand(e, データ) {
        if (データに 'expand' が含まれる) {
            データ.展開 = !データ.展開
            if (!data.expand && data.children) {
                this.collapse(データ.children)
            }
        } それ以外 {
            this.$set(データ、'expand'、true)
        }
    }
}

効果は以下のとおりです

ノードをクリック

on-node-clickメソッドを追加する

<vue2-org-tree :data="data" :horizo​​ntal="true" 折りたたみ可能 @on-expand="onExpand" @on-node-click="onNodeHandle" />

js

onNodeHandle(e, データ) {
    // eはノードデータです console.log(e)
    // データはノードにレンダリングされたデータです console.log(data)
},

結果を印刷する

その他の機能

このコンポーネントは他の機能も提供しており、おそらく最もよく使用されるのはノードの色の設定、インとアウトの移動などです。githubのアドレスを貼り付けておきますので、興味のある方は自分で学んでください。

コンポーネントのその他の機能を見るには、以下のリンクをクリックしてください。

https://github.com/hukaibaihu/vue-org-tree#readme

Vueのvue-tree-colorコンポーネントの組織構造図を実装した事例の詳細説明については、これで終了です。Vueのvue-tree-colorコンポーネントの組織構造図を実装する関連コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueのツリーコンポーネントを実装する方法
  • VueはTreeselect選択の変更操作を監視します
  • Vue elementui ツリーの任意のレベルのドラッグ機能コード
  • Vue+Element UI ツリー コントロールはドロップダウン機能メニュー (ツリー + ドロップダウン + 入力) を統合します。
  • Vue Treeselect ツリー ドロップダウン ボックス: 選択したノードの ID とラベルを取得します。
  • vue el-treeはデフォルトで最初のノードの実装コードを展開します

<<:  MySQL スケジュールバックアップタスクの簡単な分析

>>:  Linux の cut コマンドの説明

推薦する

Linux で大きなファイルの内容を消去または削除する 5 つの方法

Linux ターミナルでファイルを操作しているときに、Linux コマンドライン エディターでファイ...

CSS でデジタル ページング効果のコードと手順を実装する方法

かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングも...

Vue要素のバックグラウンド認証プロセスの分析

序文:最近、プロジェクトで管理システムに遭遇しました。権限設定が非常に興味深いと思いました。自分の学...

別の種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...

HTML ページジャンプのパラメータ渡しの問題

効果は以下のとおりです。ページジャンプボタンをクリックした後 対応する値はページ b で取得できます...

Vue でデータが変更された後にビューを同期的に更新する方法

序文少し前に、興味深い問題を目にしました。Vue のデータが変更された後に、ビューを同期的に更新する...

Typescript の as、疑問符、感嘆符の詳細な説明

1. asキーワードはアサーションを示すTypescript では、アサーションを表現する方法が 2...

Windows (コミュニティ エディション) に MySQL 8.0.18 をインストールするためのチュートリアル

この記事では、Windows で MySQL をインストールする方法について簡単に説明します。他にご...

グリッド共通レイアウトの実装

両側に隙間なし、各列間に隙間あり 幅: 100%; 表示: グリッド; グリッドテンプレート列: r...

CocosCreator ScrollView 最適化シリーズ: フレーム読み込み

目次1. はじめに2. 行き詰まった問題の分析3. 解決策(理論) 4. ソリューション(コード) ...

jsは、州、市、地区の3レベルのリンクの非選択ドロップダウンボックスバージョンを実現します。

インターネットで3レベルリンクを検索したところ、すべてオプションで書かれていました。突然、別の方法で...

JavaScript は、シンプルな虫眼鏡の最も完全なコード分析を実装します (ES5)

この記事では、参考までに、シンプルな虫眼鏡を実装するためのJavaScriptの具体的なコードを紹介...

vue3 のさまざまなファイルタイプのプレビュー機能の例

目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...

vscode で Prettier Code プラグインを使用する詳細なチュートリアル

なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...