vue可添加删除编辑的树形结构(一级)

 <div class="home">
   <div class="block">
     <p>使用 scoped slot</p>
     <el-tree
       :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
       :expand-on-click-node="false"
     >
       <span class="custom-tree-node" slot-scope="{ node, data }">
         <span v-if="!node.editable" @click="getNode(node)" v-text="data.inputs" />
         <input ref="input" v-else @blur="setNode(node,data)" v-model="newsinput">
         <span>
           <el-button
             type="text"
             size="mini"
             @click="() => append(data)"
             v-if="node.id === 1"
           >
             Append
           </el-button>
           <el-button
             type="text"
             size="mini"
             @click="() => update(node,data)"
             v-else
           >
             Edit
           </el-button>
           <el-button
             type="text"
             size="mini"
             @click="() => remove(node, data)"
           >
             Delete
           </el-button>
         </span>
       </span>
     </el-tree>
   </div>
 </div>
</template>
<script>
let id = 1000;
export default {
 name: 'AboutUs',
 data() {
   const data = [{
     id: 1,
     label: '类目',
     editable: false,
     inputs: 'leimu',
     children: [{
       id: 2,
       label: '苹果',
       editable: false,
       inputs: '苹果',
     }, {

       id: 3,
       label: '橘子',
       editable: false,
       inputs: '橘子',
     }, {

       id: 4,
       label: '香蕉',
       editable: false,
       inputs: '香蕉',
     },
     ],
   }];
   return {
     data: JSON.parse(JSON.stringify(data)),
     defaultProps: {
       children: 'children',
       inputs: 'inputs',
     },
     newsinput: '',
     activeNode: '',
   };
 },
 methods: {
 //获取节点
   getNode(e) {
     this.activeNode = e.target.innerHTML;
     console.log(e.target.innerHTML);
   },
   setNode(node, data) {
     console.log(node.label);
     console.log(data.inputs);
     console.log(this.newsinput);
     // this.newsinput = node.inputs;
     this.$set(node, 'editable', false);

     this.$set(data, 'inputs', this.newsinput);
     console.log(node.inputs);
   },
   change(node) {
     console.log(node);
   },
   //添加节点
   append(data) {
     const newChild = {
       id: id++, label: 'testtest', children: [], inputs: 'testtest', editable: false,
     };
     if (!data.children) {
       this.$set(data, 'children', []);
     }
     data.children.push(newChild);
   },
   //编辑节点
   update(node, data) {
     console.log(node);
     console.log(data);
     const { parent } = node;
     const children = parent.data.children || parent.data;
     const index = children.findIndex((d) => d.id === data.id);
     this.newsinput = data.inputs;
     this.$set(node, 'editable', true);
     this.$nextTick(() => {
       this.$refs.input.focus();
     });
   },
   //删除节点
   remove(node, data) {
     const { parent } = node;
     const children = parent.data.children || parent.data;
     const index = children.findIndex((d) => d.id === data.id);
     children.splice(index, 1);
   },
 },
};
</script>
<style lang="scss" scoped>
</style>