VUE2中树状图+作用域插槽_el-tree 插槽

<!-- 这里的:data="list" 是父传子  将list的数据传给 el-tree中 从而控制树形分支 -->
          <el-tree style="margin-top: 15px" :data="list" default-expand-all>
            <!-- 利用作用域插槽 再根据上面传给子的数据 就可以实现在不同层 添加不同的内容 比如 第二个对象 比如 第二个对象下的children子树状 -->
            <template v-slot="{ data }">
              <div class="tree-top">
                <div class="name">{{ data.name }}</div>
                <div class="manager">{{ data.manager }}</div>
                
                <div class="other">
                  <el-dropdown>
                    <span>
                      <span>操作</span>
                      <i class="el-icon-arrow-down" />
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu> 这是下拉菜单
                        <el-dropdown-item>添加子部门</el-dropdown-item>
                        <el-dropdown-item>编辑部门</el-dropdown-item>
                        <el-dropdown-item>删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </template>
          </el-tree>
 
 
 
        <script>
         export default {
          data() {
      return {
        list: [   //在list数组中 一个对象等于一层树状，，对象里面children等于第一层的儿子第二层
          {
            name: '总裁办',
            manager: '管理员',
            children: [
              {
                name: '深圳分公司',
                manager: '张宇'
              },
              {
                name: '111',
                manager: '222'
              }
            ]
          }
        ]
      }
    }
       }
        </script>

以上就是树状图   配合  作用域插槽的效果 ，它可以方便我们发请求拿到数据后直接在里面使用

效果图