Vueはツリー構造の追加、削除、変更、チェックのサンプルコードを実装します

<el-tree
    v-if="treeSetData.editFlg"
     ref="木"
     :key="treeSetData.tree_key"
     :data="treeSetData.treeData"
     ノードキー="id"
     :render-content="レンダリングコンテンツ"
     :クリック時にノードを展開="false"
     :default-expand-all="treeSetData.defaultExpandAll"
     ハイライト-現在
     @node-click="ハンドルNodeClick"
     クラス="ツリースタイル"
 </el-tree>
 <el-tree
     v-else
     ref="木"
     :key="treeSetData.tree_key"
     :data="treeSetData.treeData"
     ノードキー="id"
     :render-content="レンダリングコンテンツ"
     :クリック時にノードを展開="false"
     :default-expand-all="treeSetData.defaultExpandAll"
     ハイライト-現在
     クラス="ツリースタイル"
 </el-tree>

// ツリー構造に必要なデータtreeSetData:{
  defaultExpandAll:true, // デフォルトで展開するかどうか editFlg:true, // 編集状態かどうか treeData: [], // ツリーコンポーネントデータセット // ツリー配列の内容を編集 editList:[],
  // ツリーデータ配列の内容を削除します deleteList:[],
  // ツリーデータ配列コンテンツを追加 addList:[],
  // フラグを追加するかどうか
  addNodeFlg:false、
  //デフォルトID
  デフォルトID:5000、
  // 新しく追加された最外部ノード名 newName:'',
  ツリーキー: 0,
},

<el-button type="text" @click="add_new_Area" class="button-style"><i class="el-icon-plus" style="margin-right:5px"></i>追加</el-button>

新しいエリアを追加します（）{
      this.treeSetData.addNodeFlg = true;
    },

<el-row class="add_question" v-show="treeSetData.addNodeFlg">
    <el-col :span="11" style="margin:0px 5px">
         <el-input v-model="treeSetData.newName" placeholder="通路エリア" size="mini"></el-input>
     </el-col>
     <el-col :span="12">
         <el-button size="mini" type="primary" plain @click.stop="add_area_sure">OK</el-button>
         <el-button size="mini" type="warning" plain @click.stop="add_area_cancel">キャンセル</el-button>
     </el-col>
 </el-row>

add_area_sure() {
// ノードデータを追加します。最上位層なので、デフォルトの親IDはpidです。idは初期化で設定した[defaultId]を自分で追加したものです。データに[defaultId]フィールドを自分で追加することもできます。const nodeObj = {
    id: this.treeSetData.defaultId++,
    名前: this.treeSetData.newName、
    isEdit: false、
    子供たち： []、
    プロセスID:0
  };
  ツリーデータを設定します。
  this.treeSetData.addNodeFlg = false;
  this.treeSetData.addList.push(nodeObj);
},

add_area_cancel() {
  this.treeSetData.addNodeFlg = false;
  this.treeSetData.newName = "";
},

// エリアツリー操作グループノードを渡す、
    レンダリングコンテンツ(h, { ノード, データ, ストア }) {
        if(this.treeSetData.editFlg == false){
            戻る （
                <span class="tree-span">
                    <span>{this.showOrEdit(データ)}</span>
                    <div class="tree_node_op">
                        <i class="el-icon-edit" on-click={ev => this.nodeEdit(ev, store, data)} style="padding-left: 10px;"></i>
                        <i class="el-icon-circle-plus" on-click={() => this.nodeAdd(node, data)} style="margin-left: 5px;"></i>
                        <i class="el-icon-remove" on-click={() => this.nodeDelete(node, data)} style="margin-left: 5px;"></i>
                    </div>
                </span>
            );
        } それ以外 {
            戻る （
                <span class="tree-span">
                    <span>{this.showOrEdit(データ)}</span>
                    <div class="tree_node_op">
                    </div>
                </span>
            );
        }
    },

    // ノード編集 showOrEdit(data) {
      if (data.isEdit) {
        戻る （
          <el-入力
            タイプ="テキスト"
            値={データ名}
            オンブラー={ev => this.edit_sure(ev, データ)}
            サイズ="ミニ"
            クラス="入力スタイル"
          </el-input> ...
        );
      } それ以外 {
        <span className="node_labe">{data.name}</span> を返します。
      }
    },
    ノード編集(ev, ストア, データ) {
      データを編集するには
      this.$nextTick(() => {
        定数$入力 =
          ev.target.parentNode.parentNode.querySelector("入力") ||
          ev.target.parentElement.parentElement.querySelector("入力");
        !$input ? "" : $input.focus();
      });
    },

    // 編集を確認する edit_sure(ev, data) {
        定数$入力 =
            ev.target.parentNode.parentNode.querySelector("入力") ||
            ev.target.parentElement.parentElement.querySelector("入力");
        もし(!$input){
            false を返します。
        } それ以外 {
            データ名 = $input.value;
            データ編集
        }
        // 編集ツリーデータの内容を変更します。let editFilter = this.treeSetData.editList.filter((item)=>item.id == data.id);
        （editFilter.length == 0）の場合{
            this.treeSetData.editList.push(データ);
        } それ以外 {
            this.treeSetData.editList.forEach((item,i)=>{
                if(item.id == data.id) {
                    this.treeSetData.editList[i].name = データ.name;
                }
            })
        }
    },

    // ノードを追加 nodeAdd(node, data) {
      (data.pid !== 0)の場合{
        this.$message({type:'error',message:'アクセス領域には最大 2 つの階層レベルを設定できます。'});
        false を返します。
      } それ以外 {
          const newChild = { id: this.treeSetData.defaultId++, name: '新しく追加されたアクセス領域', isEdit:false, pid:data.id, children: [] };
          if (!data.children) {
            this.$set(データ, 'children', []);
          }
          データ.children.push(新しい子);
          this.treeSetData.addList.push(newChild);
      }
    },

    // ノードの削除 nodeDelete(node, data) {
      this.treeSetData.deleteList.push(データ);
      定数親 = ノード.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(インデックス、1);
    },

// 最初に追加し、次にデータ統合を変更します this.treeSetData.addList.forEach((item,i)=>{
    editFilter を this.treeSetData.editList.filter((value)=>value.id == item.id) とします。
    （editFilter.length !== 0）の場合{
        this.treeSetData.addList[i] = editFilter[0];
        this.treeSetData.editList = this.treeSetData.editList.filter((value)=>value.id !== item.id);
    }
})
// 最初にデータ統合を追加し、次に削除します this.treeSetData.deleteList.forEach((item,i)=>{
    addFilter を this.treeSetData.addList.filter((value)=>value.id == item.id) とします。
    if(addFilter.length !== 0){
        this.treeSetData.deleteList = this.treeSetData.deleteList.filter((value)=>value.id !== item.id);
        this.treeSetData.addList = this.treeSetData.addList.filter((value)=>value.id !== item.id);
    }
})
// 最初に編集し、次にデータ統合を削除します this.treeSetData.deleteList.forEach((item,i)=>{
    editFilter を this.treeSetData.editList.filter((value)=>value.id == item.id) とします。
    （editFilter.length !== 0）の場合{
        this.treeSetData.editList = this.treeSetData.editList.filter((value)=>value.id !== item.id);
    }
})

<スタイル lang="less">
.el-メッセージボックス {幅: 450px;}
.button-style {パディング: 0px}
.input-style {高さ: 15px;幅: 140px;}
.パネル本体を通して{
  パディング上部:12px;
  幅: 100%;
  ディスプレイ: フレックス;
  .パネルエリア左 {
    位置: 相対的;
    幅: 360ピクセル;
    境界線:2px実線rgba(240,240,240,1);
    境界線の半径: 5px;
    .head-title {
        display:flex;justify-content: space-between;padding:10px 10px;
        h5{左境界線:solid 3px #FB8742;左パディング:5px;高さ: 20px;行の高さ:20px;フォントサイズ:16px;}
    }
    .エリアツリー{
        幅: 100%;
        .treeスタイル{
            マージン: 0px 0px 10px 10px;
            高さ:88%;
            オーバーフロー-y: 自動;
        }
        .el-tree-node__content { 
            パディング左: 10px;ディスプレイ: flex;幅: 100%; 
            .tree-span {
                表示: flex; 幅: 100%; 
                .tree_node_op {
                    左余白: 10px;色: #D3D3D3;
                }
            }
        }
    }
    .add_question {
        マージン: 10px 0px;
    }
    .foot-style{
        パディング右:5px; 
        高さ: 40px;
        テキスト配置: 右;
    }
  }
  .パネルエリア右 {
    右マージン: 5px;
    幅: 100%;
    左パディング: 15px;
    高さ: 100%;
    .el-行 {
      幅: 100%;
      ディスプレイ: フレックス;
      コンテンツの両端揃え: スペースの間;
      .located-class {
        幅: 50%;
      }
      .デバイスフロアクラス {
        幅: 50%;
        ディスプレイ: フレックス;
        コンテンツの端揃え: flex-end;
      }
    }
  }
}
</スタイル>