ネプ# 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" /> 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をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL スケジュールバックアップタスクの簡単な分析
<br />ページに <img src=""> が含まれ...
Linux ターミナルでファイルを操作しているときに、Linux コマンドライン エディターでファイ...
かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングも...
序文:最近、プロジェクトで管理システムに遭遇しました。権限設定が非常に興味深いと思いました。自分の学...
「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...
効果は以下のとおりです。ページジャンプボタンをクリックした後 対応する値はページ b で取得できます...
序文少し前に、興味深い問題を目にしました。Vue のデータが変更された後に、ビューを同期的に更新する...
1. asキーワードはアサーションを示すTypescript では、アサーションを表現する方法が 2...
この記事では、Windows で MySQL をインストールする方法について簡単に説明します。他にご...
両側に隙間なし、各列間に隙間あり 幅: 100%; 表示: グリッド; グリッドテンプレート列: r...
目次1. はじめに2. 行き詰まった問題の分析3. 解決策(理論) 4. ソリューション(コード) ...
インターネットで3レベルリンクを検索したところ、すべてオプションで書かれていました。突然、別の方法で...
この記事では、参考までに、シンプルな虫眼鏡を実装するためのJavaScriptの具体的なコードを紹介...
目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...
なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...