使用Element-ui的tree组件

前言

1 我们都知道tree组件为树形结构组件

2 前面我们的后端的数据已经通过tree组件显示到我们的前端页面了

3 身为一个后台的管理系统，肯定可以对这些值，进行CRUD 我们如何为我们的页面的数据后面添加按钮呢

操作

1.方式使用 scoped slot的添加按钮

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

show-checkbox ：节点是否可被选择
:expand-on-click-node=“false”： 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点，我们点击的时候才显示下一层的目录
node-key=“catId”：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 唯一标识
我们还在删除按钮里面判断了一下如果node.childNodes.length==0意思是没有下一级目录就才把删除显示出来
我们也在添加里面判断了一下node.level<=2只有层级等于2和大于2的时候才显示添加按钮

2 查看我们的remove和append方法

目前为止的效果