Vue-tree-edit NPM

vue-tree-edit

Quick Start

1. Import vue-tree-edit into your vue.js project.

Using build tools:

npm install --save vue-tree-edit

import Vue from 'vue';
import vueTreeEdit from 'vue-tree-edit';

Vue.use(vueTreeEdit);

2. Now you have it. The simplest usage:

<vue-tree-edit :treeData="treeData" @delSelect="remove" @append="append" @editData="edit"></vue-tree-edit>

export default {
  name: 'app',
  data(){
    return {
     treeData:[
       {
        "id": 1,
        "name": "技术部",
        "level": 1,
        "child": [
          {
            "id": 2,
            "name": "运维组",
            "level": 2,
            "child": [
              {
                "id": 3,
                "name": "godo",
                "level": 3,
                "child": []
              }
            ]
          },
          {
            "id": 4,
            "name": "测试组",
            "level": 2,
            "child": []
          }
        ]
      }]
    }
  },
  components: {
  },
  methods:{
     remove(obj,node){
      this.treeData = obj;
    },
    append(obj,data,node,e){
      this.treeData = obj;
    },
    edit(obj,data,node,e){
      this.treeData = obj;
    }
  }
}