谷粒商城day35 -商品服务-API-三级分类-给树形菜单添加新增删除页面效果

1.打开ELEMENT UI 的API看到给树形菜单添加如下新增删除 为如下两种方式，下面我们选择第二种

2. API往下翻可看到源码示例

    <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>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>

3.上面代码复制到我们的页面并进行修改

 show-checkbox  显示勾选框

node-key="catId"  添加key  key必须是能代表节点数据对象的属性里的唯一值，比如ID

:expand-on-click-node="false"   点击该按钮时不展开该菜单子菜单

v-if="node.level <= 2"   因为我们的菜单是三层 所以前两层才显示追加

v-if="node.childNodes.length == 0"   子菜单数量为0的菜单才能被删除

<el-tree
      :data="menus"
      :props="defaultProps"
      show-checkbox
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
      node-key="catId"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">Append</el-button>
        <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
      </span>
    </span>
    </el-tree>

4.打开前端页面，如下图所示