Vueはel-tree遅延読み込みを使用して、追加、削除、変更、クエリ機能を実装します。

// refreshNode: 更新するノード; newNodeData: 新しい子ノードのデータ refreshNode.splice(0, refreshNode.length);
ノードをリフレッシュします。doCreateChildren(新しいノードデータ)。

menuNodeClick(データ、ノード、ツリーノード) {
    this.selectNodeData = データ
    this.selectNode = ノード
}

/**
* ノードデータを更新 * @node [node/Object]: ノードを更新、ノード以下のすべてのノードを更新 * @type [String]: ノードタイプ、「node」はノードがツリーのノード情報ノードであることを意味します。「data」はノードがツリーのノード情報のデータであることを意味します */
refreshTreeNode(ノード、タイプ) {
    ノードをリフレッシュします。
    // 更新するノードの子ノードを取得します。if(type === 'node') {
        リフレッシュノード = ノード.childNodes
    }それ以外の場合(type === 'data') {
        getNode = this.$refs.tree.getNode(node) とします。
        リフレッシュノード = getNode.childNodes
    }
    // 元の子ノードを削除します。refreshNode.splice(0, refreshNode.length);
    //データを再要求し、ノードを更新します。this.requestTreeNode(node)
}

// 現在のノードを選択してこれを設定します。$refs.tree.setCurrentKey(
    this.selectNodeData[this.nodeKey]
）

[
    {
        ...、
        子供たち： [
            {
                ...、
                子供たち： [
                    {
                        ...、
                        子供たち： [...]、
                    },
                    {
                        ...、
                        子供たち： [...]、
                    }
                ]
            },
            {
                ...、
                子供たち： [
                    {
                        ...、
                        子供たち： [...]、
                    }
                ]
            }
        ]
    }
    
]

<el-tree
            :data="ツリーデータ"
            :props="デフォルトプロパティ"
            :load="ノードツリーをロード"
            @node-click="ハンドルNodeClick"
            怠け者
            :クリック時にノードを展開="false"
             :default-expanded-keys="['1']"
            ノードキー="id"
            :ハイライト現在の値="true"
          >
            <span class="custom-tree-node" slot-scope="{ ノード、データ }">
              <span class="treeLeft">{{ node.label }}</span>
              <span class="treeRight">
                <i
                  v-if="node.level === 1"
                  @click="() => appendNode(ノード、データ)"
                  クラス="el-icon-plus"
                  スタイル="色: 青"
                </i>
                <!--グループを追加-->
                <!-- ルートノードは削除したり名前を変更したりする必要はありません-->

                <i
                  v-if="data.id !== 0"
                  @click="() => deleteNode(ノード、データ)"
                  クラス="el-icon-delete"
                  スタイル="色: 赤"
                </i>
                <!--グループを削除-->

                <i
                  v-if="data.id !== 0"
                  @click="() => editNode(ノード、データ)"
                  クラス="el-icon-edit"
                  スタイル="色: 青"
                </i>
                <!--グループ名を変更-->
              </span>
            </span>
          </el-tree>

 // ツリーメニュー treeData: [], // ツリーノード defaultProps: { // el-tree のデフォルトデータ配列パラメータを変更します children: 'children',
        ラベル: '名前',
        id: 'id',
        親ID: '親ID',
        isLeaf: 'leaf' // ノードがリーフノードであるかどうかを指定します。これは、lazy 属性が指定されている場合にのみ有効です},

 // ツリーデータをロードする loadNodeTree(node, resolve) {
      const that = this
      ノードレベル === 0 の場合 {
        that.loadtreeData(ノード、解決)
      } それ以外の場合 (node.level === 1) {
        that.getChildByList(ノード、解決)
      }
    },
    // get loadtreeData は親ノードデータ、getChildByList は子ノードデータを非同期的に取得します loadtreeData(nodeData, resolve) {
      定数データ型 = {
        ページインデックス: 1,
        ページサイズ: 100000
      }
      getAlltype(データ型)
        .then(res => {
          定数ルートChildren = []
          （res.code === 200）の場合{
            定数データ = res.data.list
            データ.map(アイテム => {
              ルートチャイルド.push({
                名前: アイテム.typeName、
                親ID: ''、
                id: アイテム.id、
                葉: 偽、
                子供たち： []
              })
            })
            //resolve にコンテンツがある場合は遅延ロードされてクエリされ、そうでない場合は変更されます if (resolve) {
              解決(ルートの子供)
            } それ以外 {
              ノードデータ.childNodes = []
              nodeData.doCreateChildren(ルートChildren)
            }
          } それ以外 {
            解決する（[]）
          }
        })
    },
    // 子ノードの取得リクエスト getChildByList(nodeData, resolve) {
      var _parentID = ノードデータ.data.id
      定数型仕様 = {
        タイプID: _親ID、
        ページインデックス: 1,
        ページサイズ: 100000
      }
      getAlltypeSpec(typeSpec).then(res => {
        定数ルートChildren = []
        （res.code === 200）の場合{
          定数データ = res.data.list
          データ.map(アイテム => {
            ルートチャイルド.push({
              名前: アイテム.説明、
              親ID: アイテムタイプID、
              id: アイテム.id、
              葉: 真、
              子供たち： []
            })
          })
          if (解決) {
            解決(ルートの子供)
          } それ以外 {
            ノードデータ.childNodes = []
            nodeData.doCreateChildren(ルートChildren)
          }
        } それ以外 {
          偽を返す
        }
      }).catch(エラー => {
        コンソール.log(エラー)
      })
    },
    // ノードクリックイベント handleNodeClick(data, node) {
      this.addnode = ノード
      this.adddata = データ
      ノードレベル === 1 の場合 {
        this.queryForm.typeId = ノードデータID
        this.queryForm.typeSpecId = ''
      } それ以外の場合 (node.level === 2) {
        this.queryForm.typeId = node.data.parentId
        this.queryForm.typeSpecId = ノードデータID
      }
      this.クエリ()
    },

 // ツリーノードに型指定を追加 appendNode(node, data) {
      this.addTypesSpec = {
        タイプ名: ノード.データ.名前、
        タイプID: ノードデータID
      }
      this.createTypesSpecDialog = true
    },
    // ツリータイプの変更 editNode(node, data) {
      定数 typeId = node.data.parentId
      // レベル1型 if (node.level === 1) {
        this.editTypesDialog = true
        this.editTypes = {
          id: ノード.データ.id、
          タイプ名: ノード.データ.名前
        }
      } それ以外 {
        this.editTypesSpecDialog = true
        this.getSelectTypes()
        // this.editTypesSpec = Object.assign({}, node.data)
        this.editTypesSpec = {
          タイプID: タイプID、
          id: ノード.データ.id、
          説明: node.data.name
        }
      }
    },

    // ツリー型の削除 deleteNode(node, data) {
      // レベル1型 if (node.level === 1) {
        this.$msgbox.confirm('この操作によりアセットタイプデータが削除されます。続行しますか?', 'プロンプトの削除', {
          confirmButtonText: '確認'、
          cancelButtonText: 'キャンセル'、
          タイプ: '警告'
        }).then(() => {
          typeDel(ノードデータID)。次に(
            応答 => {
              this.$message('正常に削除されました')
              this.クエリ()
              this.loadNodeTree(ノード.parent)
            },
            エラー => {
              コンソールログ('エラー', エラー)
            }
          ）
        }).catch(() => {
          this.$message.error('キャンセルされました')
        })
      } それ以外 {
        this.$msgbox.confirm('この操作により、資産タイプ仕様データが削除されます。続行しますか?', '削除プロンプト', {
          confirmButtonText: '確認'、
          cancelButtonText: 'キャンセル'、
          タイプ: '警告'
        }).then(() => {
          typeSpecDel(node.data.id).then(
            応答 => {
              this.loadNodeTree(ノード.parent)
              this.$message('正常に削除されました')
              this.クエリ()
            },
            エラー => {
              コンソールログ('エラー', エラー)
            }
          ）
        }).catch(() => {
          this.$message.error('キャンセルされました')
        })
      }
    },

 this.$message('編集に成功しました')
              this.loadNodeTree(this.addnode.parent)

ノードが展開されている場合
    ノードを展開します。
}それ以外 {
    ノードを折りたたむ();
}

ノード.親