ElementUI Treeツリーコントロールの使用は、ノードにアイコンを追加します。

3771 ワード
Element Tree ツリーコントロール
前言:
  プロジェクトはVueで管理システムを作る必要があるので、その中にはElementUIのツリーコントロールに役立つ会社部門の管理ページがありますが、構造の中ではchexkBoxオプションボックスを使っていません。この機能が触れた問題についてまとめてみます。
データレンダリング
1)ラベルにdata属性をバインドする

2）Vueのインスタンスのdataにlist変数を宣言する。

3）バックグラウンドから取得したデータは、複数のオブジェクトを配列内に入れ込んだ構造であり、リストに値を与えます。
現在のデータはOrgNameで現在の構造名です。
Childrenはサブブランチ配列として、
サブブランチの構造は現在の構造と一致している。

4）ページで構造を示す方法は、ラベルにポート属性を結びつけることであり、
そして、vueのインスタンスのdataにおいて、表示された名前をlabel属性で定義し、
childern属性で結合して展示したサブブランチデータ

5）最後に示した構造は以下の通りである。

現在のブランチをクリックして、現在のブランチと上位のブランチの値を取得します。

1）ここでは@node-clickイベントを使用し、関数を結合します。
関数は、vueのインスタンスのmethodsで定義され、2つのパラメータnodeとdataを受信することができます。
2）nodeは対象です。
現在のブランチをクリックして得られたデータです。
現在の階層のデータだけが必要なら、nodeを使ってもいいです。
楽屋には上級者に一緒に返送するIDがあります。
しかし、ページで分岐をクリックすると、上位の名前が表示されます。
だからここでnodeを使うのはあまり足りません。

3）ダタも同じ対象であり、
彼のdata属性には現在の分岐の値が含まれています。
その中のparent属性は彼の上位の値を含んでいます。
さらに、中のparent属性はさらに上のレベルの値を含んでいます。
自分の現在のプロジェクトの必要に応じて、dataかnodeかを使って自分の必要な値を取ることができます。

三、el-treeツリーコントロールはノードにアイコンを追加します。

<template>
  <div class="tree">   
  
  <el-tree :data="data5" node-key="id" default-expand-all >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>
        <i :class="node.icon"></i>{{ node.label }}
      </span>       
    </span>
  </el-tree>

  </div>
</template>

<script>
  export default {
    data () {
      return {
         data5: [{
          id: 1,
          label: '   1',
          icon:'el-icon-success',
          children: [{
            id: 4,
            label: '   1-1',
            children: [{
              id: 9,
              label: '   1-1-1',
              icon: 'el-icon-info'
            }, {
              id: 10,
              label: '   1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '   2',
          children: [{
            id: 5,
            label: '   2-1',
          }, {
            id: 6,
            label: '   2-2'
          }]
        }, {
          id: 3,
          label: '   3',
          children: [{
            id: 7,
            label: '   3-1'
          }, {
            id: 8,
            label: '   3-2'
          }]
        }]
      }
    }
  
  }
</script>

<style scoped>

</style>

ここでは、Element Treeツリーコントロールの使用について、ノードにアイコンを追加する記事を紹介します。Element Treeツリーコントロールの内容については、以前の記事を検索したり、以下の関連記事を閲覧したりしてください。これからもよろしくお願いします。
jsツリーデータをフラットデータに変換する方法の例
SpringBoot Tomcat接続池の使用を統合します。