✅P49_三级分类-删除-页面效果

---

使用scoped slot编写添加和删除按键

**category.vue**

<template>
  <div>
    <el-tree :data="menu" :props="defaultProps">
      <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>
  </div>
</template>
//...其他内容省略

页面效果：

补全append和remove方法，并点击Append和Delete按钮

  methods: {

    getMenuList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get',
      }).then(({ data }) => {  // 1.使用解构即{}，将data对象解构出来
        console.log("成功获取到三级分类数据", data);
        // 2.将data中的data赋值给menu
        this.menu = data.data;
      });
    },

    append(data) {
      console.log("append", data);
    },

    remove(node, data) {
      console.log("remove", node, data);
    }
    
  },

问题现象：当我们点击Append或者Delete时，会自动进行一个扩展，我们想要的效果是只有当我们点击箭头才进行扩展

解决方案：

Attributes属性有如下描述，

expand-on-click-node	是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。	boolean	true

<template>
  <div>
    <el-tree :data="menu" :props="defaultProps" :expand-on-click-node="false">
      //略
    </el-tree>
  </div>
</template>

再次测试发现点击Append或者Delete时不会展开啦。

只有节点没有子节点是才能进行delete，只有一级和二级目录才能append

使用v-if进行一个判断，首先使用scoped slot会传进来node和data两个数据，其中node有个level属性，就是节点的层级，node还有个childNodes表示子节点的个数即childNodes数组的长度为0可以删除

<template>
  <div>
    <el-tree :data="menu" :props="defaultProps" show-checkbox :expand-on-click-node="false">
      <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>
  </div>
</template>

标识每个节点，我们需要为Tree设置node-key

catId是每个节点唯一的标识属性；

<el-tree :data="menu" :props="defaultProps" show-checkbox :expand-on-click-node="false" node-key="catId">