element ui tree树形控件 编辑，新增及删除

element ui tree树形控件 编辑，新增及删除。效果图如下：

可实现对一、二、三级目录的增删改，以及页面样式实现。

<template>代码

<template>
  <div>
    <!-- 导航菜单 -->
    <div class="custom-tree-container">
      <div class="block">
        <!-- <p>使用 scoped slot</p> -->
        <div class="allC" @click="handleAllCase">
          <i class="el-icon-link"></i><span class="allCase">所有用例</span>
        </div>
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :expand-on-click-node="false"
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          @node-drop="handleDrop"
          @node-click="myEvent"
          draggable
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
        >
          <span
            class="custom-tree-node"
            slot-scope="{ node, data }"
            @mouseenter="onMouseOver($event)"
            @mouseleave="onMouseOut($event)"
          >
            <span v-if="!data.isEdit">{
   { node.label }}</span>
            <span class="isEdit">
              <!-- 编辑状态 -->
              <div v-if="data.isEdit">
                <el-input
                  v-model="data.label"
                  autofocus