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" :horizontal="true" /> を追加するだけです

効果は以下のとおりです

折りたたみディスプレイ

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

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

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

拡大中

<vue2-org-tree :data="data" :horizontal="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" :horizontal="true" 折りたたみ可能 @on-expand="onExpand" @on-node-click="onNodeHandle" />

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をよろしくお願いいたします。

以下もご興味があるかもしれません: