首先官网上的树形控件教程地址为Element - The world's most popular Vue UI framework

案例一：

要实现这种类型的树控件，并且后边相关操作：

1.1后端准备工作

 首先，数据库表为：

 查询接口返回的实体类为：

@Data@NoArgsConstructor@RequiredArgsConstructor // 有参构造@EqualsAndHashCode(callSuper = false ,of = "name")// 表示以name去重写的Equals和HashCode@Accessors(chain = true)@TableName("t_department")@ApiModel(value="Department对象", description="")public class Department implements Serializable {    private static final long serialVersionUID = 1L;    @ApiModelProperty(value = "id")    @TableId(value = "id", type = IdType.AUTO)    private Integer id;    @ApiModelProperty(value = "部门名称")    @Excel(name = "部门")    @NonNull    private String name;    @ApiModelProperty(value = "父id")    private Integer parentId;    @ApiModelProperty(value = "路径")    private String depPath;    @ApiModelProperty(value = "是否启用")    private Boolean enabled;    @ApiModelProperty(value = "是否上级")    private Boolean isParent;    @ApiModelProperty(value = "子部门列表")    @TableField(exist = false)    private List<Department> children;    @ApiModelProperty(value = "返回结果，存储过程使用")    @TableField(exist = false)    private Integer result;}

查询接口返回的数据格式：通过属性 children来判断是否有子节点

[  {    "id": 1,    "name": "股东会",    "parentId": -1,    "depPath": ".1",    "enabled": true,    "isParent": true,    "children": [      {        "id": 2,        "name": "董事会",        "parentId": 1,        "depPath": ".1.2",        "enabled": true,        "isParent": true,        "children": [          {            "id": 3,            "name": "总办",            "parentId": 2,            "depPath": ".1.2.3",            "enabled": true,            "isParent": true,            "children": [              {                "id": 4,                "name": "财务部",                "parentId": 3,                "depPath": ".1.2.3.4",                "enabled": true,                "isParent": false,                "children": [],                "result": null              },              {                "id": 5,                "name": "市场部",                "parentId": 3,                "depPath": ".1.2.3.5",                "enabled": true,                "isParent": true,                "children": [                  {                    "id": 6,                    "name": "华东市场部",                    "parentId": 5,                    "depPath": "1.2.3.5.6",                    "enabled": true,                    "isParent": true,                    "children": [                      {                        "id": 8,                        "name": "上海市场部",                        "parentId": 6,                        "depPath": "1.2.3.5.6.8",                        "enabled": true,                        "isParent": false,                        "children": [],                        "result": null                      }                    ],                    "result": null                  },                  {                    "id": 7,                    "name": "华南市场部",                    "parentId": 5,                    "depPath": "1.2.3.5.7",                    "enabled": true,                    "isParent": false,                    "children": [],                    "result": null                  },                  {                    "id": 9,                    "name": "西北市场部",                    "parentId": 5,                    "depPath": ".1.2.3.5.9",                    "enabled": true,                    "isParent": true,                    "children": [                      {                        "id": 10,                        "name": "贵阳市场",                        "parentId": 9,                        "depPath": ".1.2.3.5.9.10",                        "enabled": true,                        "isParent": true,                        "children": [                          {                            "id": 11,                            "name": "乌当区市场",                            "parentId": 10,                            "depPath": ".1.2.3.5.9.10.11",                            "enabled": true,                            "isParent": false,                            "children": [],                            "result": null                          }                        ],                        "result": null                      }                    ],                    "result": null                  }                ],                "result": null              },              {                "id": 12,                "name": "技术部",                "parentId": 3,                "depPath": ".1.2.3.12",                "enabled": true,                "isParent": false,                "children": [],                "result": null              },              {                "id": 13,                "name": "运维部",                "parentId": 3,                "depPath": ".1.2.3.13",                "enabled": true,                "isParent": false,                "children": [],                "result": null              }            ],            "result": null          }        ],        "result": null      },      {        "id": 150,        "name": "aaa",        "parentId": 1,        "depPath": ".1.150",        "enabled": true,        "isParent": true,        "children": [          {            "id": 151,            "name": "abbb",            "parentId": 150,            "depPath": ".1.150.151",            "enabled": true,            "isParent": false,            "children": [],            "result": null          }        ],        "result": null      },      {        "id": 154,        "name": "ccc",        "parentId": 1,        "depPath": ".1.154",        "enabled": true,        "isParent": false,        "children": [],        "result": null      },      {        "id": 157,        "name": "dddd",        "parentId": 1,        "depPath": ".1.157",        "enabled": true,        "isParent": false,        "children": [],        "result": null      }    ],    "result": null  }]

1.2前端代码

从官网上复制一个模板过来，搜索的话，直接往下找一个有搜索框的，把搜索框复制过来，复制好就可以开始修改，写增删改查的方法调用了。

 写好的代码如下：

<template>  <div style="width: 550px;">    <el-input      placeholder="请输入部门名称进行搜索..."      prefix-icon="el-icon-search"      v-model="filterText">    </el-input>    <el-tree      :data="deps"      :props="defaultProps"      :filter-node-method="filterNode"      :expand-on-click-node="false"      ref="tree">      <!-- slot-scope可以自定义树节点里的内容，node当前节点的node对象，data后端对应返回的数据 -->      <span class="custom-tree-node" slot-scope="{ node, data }" style="display:flex; justify-content: space-between;width: 100%;">        <span>{{ data.name }}</span>        <span>          <el-button            type="primary"            size="mini"            class="depBtn"            @click="() => showAddDep(data)">            添加部门          </el-button>          <el-button            type="danger"            size="mini"            class="depBtn"            @click="() => deleteDep(data)">            删除部门          </el-button>        </span>      </span>    </el-tree>    <!-- 添加部门的弹出框 -->    <el-dialog      title="添加部门"      :visible.sync="dialogVisible"      width="30%">      <div>        <table>          <tr>            <td><el-tag>上级部门</el-tag></td>            <td><el-tag>{{pname}}</el-tag></td>          </tr>          <tr>            <td><el-tag>部门名称</el-tag></td>            <td><el-input v-model="dep.name" placeholder="请输入部门名称..."></el-input></td>          </tr>        </table>      </div>      <span slot="footer" class="dialog-footer">        <el-button @click="dialogVisible = false">取 消</el-button>        <el-button type="primary" @click="doAddDep">确 定</el-button>      </span>    </el-dialog>  </div></template><script>export default {    data(){      return{        // 树的搜索条件        filterText: '',        // 树的数据        deps: [],        // 树的配置        defaultProps: {          children: 'children',          label: 'name'        },        // 添加弹出框        dialogVisible: false,        // 添加的部门数据        dep:{          name:'',          parentId: -1        },        // 上级部门名称        pname: ''      }    },    mounted(){      this.initDeps();    },    methods: {      // 初始化数据      initDeps(){        this.getRequest('/system/basic/department/').then(resp=>{          this.deps = resp;        })      },      // 树的搜索      filterNode(value, data) {        if (!value) return true;        return data.name.indexOf(value) !== -1;      },      // 添加弹框      showAddDep(data){        console.log(data)        this.dep.parentId = data.id;        this.pname = data.name;        this.dialogVisible = 'true'      },      // 添加      doAddDep(){        this.postRequest('/system/basic/department/',this.dep).then(resp=>{          if(resp.code==200){            resp.obj.children = []            this.addDep2Deps(this.deps,resp.obj);            this.initDep();            this.dialogVisible = false;          }        })      },      initDep(){        this.dep = {          name: '',          parentId: -1        }        this.panme = ''      },      // 添加成功后手动的给树加数据      addDep2Deps(deps,dep){        for(let i = 0; i<deps.length; i++){          let d= deps[i];          if(d.id == dep.parentId){            d.children = d.children.concat(dep);            if(d.children.length>0){              d.isParent = true;            }            return;          }else{            // 递归            this.addDep2Deps(d.children,dep);          }        }      },      // 删除      deleteDep(data){        console.log(data)        if(data.isParent){          this.$message.error("父部门无法删除");        }else{          this.$confirm('此操作将永久['+data.name+']部门, 是否继续?', '提示', {            confirmButtonText: '确定',            cancelButtonText: '取消',            type: 'warning'          }).then(() => {            this.deleteRequest('/system/basic/department/'+data.id).then(resp=>{              if(resp.code==200){                this.removeDepFromDeps(null,this.deps,data.id);              }            })          }).catch(() => {            this.$message({              type: 'info',              message: '已取消删除'            });                    });        }      },      // 手动删除  (父部门，总部门数据，要删除的部门id)      removeDepFromDeps(p,deps,id){        for(let i=0; i<deps.length; i++){          let d = deps[i];          if(d.id==id){            deps.splice(i,1);            if(deps.length==0){              p.isParent = false;            }            return;          }else{            this.removeDepFromDeps(d,d.children,id);          }        }      }    },    watch: {      filterText(val) {        this.$refs.tree.filter(val);      }    }}</script><style>.depBtn{  padding: 3px;}</style>

需要注意的是：

1：树组件中    :data="deps" 加载树组建的数据。:props="defaultProps" 加载树组件的配置，其中label是给个枝叶的名字对应的字段，children是子节点对应的字段。:filter-node-method="filterNode" 树组件的搜索,filterNode过滤的回调，这个官网拷贝即可。:expand-on-click-node="false" 关闭点击折叠，只有点击前面的小三角才能展开折叠。

2：搜索框绑定的数据filterText，下面监听这个数据的改变，如果改变了，就调用树的filter方法（this.$refs.tree.filter(val);），进行过滤，这个方法的回调在树组件的属性中定义:filter-node-method="filterNode" ，也就是输入框值改变了，会去掉filterNode这个方法，这个方法传入两个值，value是文本框输入值，data是树组件的数据，value为空直接返回，不为空则过滤。

3： 添加部门的时候，添加成功后不能单纯的掉接口，重新请求一次树中的数据，这样的话，每添加一个部门，整个树就会折叠起来。这时候就需要不调接口请求新的数据，在js中操作树中的数据this.deps，让它和数据库保持同步。首先在成功后调用方法： addDep2Deps(deps,dep)  这个方法第一个参数是整个树中的数据，第二个参数是新添加的树的数据（这个数据是添加成功接口回显的数据，也就是添加的这条记录信息）在这个方法中，会循环，找到对应的父节点，给它的子节点拼接数据，修改父节点isParent属性（是否有孩子），之后就一直递归，知道添加完成为止。这个数据添加成功后，清空弹出框中输入的信息，关闭弹出框。

4：删除操作，同样，删除时也要手动的在js中把这条数据删除，不能请求新数据，请求新数据会导致树整个关闭，用户体验十分不好，需要在js中把树中的数据和数据库中进行同步。

调用接口删除成功后，调用removeDepFromDeps(p,deps,id)方法，在js中进行数据删除，调用时，第一个参数传null表示从顶层节点开始往下找，第二个参数是树的数据，第三个参数是要删除部门的id。同样进行循环，添加中比较的是父节点的id，删除是，比较的就是这个叶子的id，如果相同，那就删除，同时，判断把这个叶子删掉后，这个枝下面还有没有叶子，因为有叶子的枝是不能删除的，所以要再判断一下修改isParent的状态，之后还是一样，在一层中没有查询到的话，就递归到下一层去找。

案例二

这种前面带有选择框的，进行授权操作 

2.1后端准备

对应的数据库表

 对应的实体类：

@Data@EqualsAndHashCode(callSuper = false)@Accessors(chain = true)@TableName("t_menu")@ApiModel(value="Menu对象", description="")public class Menu implements Serializable {    private static final long serialVersionUID = 1L;    @ApiModelProperty(value = "id")    @TableId(value = "id", type = IdType.AUTO)    private Integer id;    @ApiModelProperty(value = "url")    private String url;    @ApiModelProperty(value = "path")    private String path;    @ApiModelProperty(value = "组件")    private String component;    @ApiModelProperty(value = "菜单名")    private String name;    @ApiModelProperty(value = "图标")    private String iconCls;    @ApiModelProperty(value = "是否保持激活")    private Boolean keepAlive;    @ApiModelProperty(value = "是否要求权限")    private Boolean requireAuth;    @ApiModelProperty(value = "父id")    private Integer parentId;    @ApiModelProperty(value = "是否启用")    private Boolean enabled;    @ApiModelProperty(value = "子菜单")    @TableField(exist = false) // 告诉mybatisplus这个字段不在表中，查询的时候不要去查    private List<Menu> children;    @ApiModelProperty(value = "角色列表")    @TableField(exist = false)    private List<Role> roles;}

 查询接口返回的数据

{  "code": 200,  "message": "查询成功",  "obj": [    {      "id": 1,      "url": null,      "path": null,      "component": null,      "name": "所有",      "iconCls": null,      "keepAlive": null,      "requireAuth": null,      "parentId": null,      "enabled": null,      "children": [        {          "id": 2,          "url": null,          "path": null,          "component": null,          "name": "员工资料",          "iconCls": null,          "keepAlive": null,          "requireAuth": null,          "parentId": null,          "enabled": null,          "children": [            {              "id": 7,              "url": null,              "path": null,              "component": null,              "name": "基本资料",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 8,              "url": null,              "path": null,              "component": null,              "name": "高级资料",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            }          ],          "roles": null        },        {          "id": 3,          "url": null,          "path": null,          "component": null,          "name": "人事管理",          "iconCls": null,          "keepAlive": null,          "requireAuth": null,          "parentId": null,          "enabled": null,          "children": [            {              "id": 9,              "url": null,              "path": null,              "component": null,              "name": "员工资料",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 10,              "url": null,              "path": null,              "component": null,              "name": "员工奖惩",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 11,              "url": null,              "path": null,              "component": null,              "name": "员工培训",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 12,              "url": null,              "path": null,              "component": null,              "name": "员工调薪",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 13,              "url": null,              "path": null,              "component": null,              "name": "员工调动",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            }          ],          "roles": null        },        {          "id": 4,          "url": null,          "path": null,          "component": null,          "name": "薪资管理",          "iconCls": null,          "keepAlive": null,          "requireAuth": null,          "parentId": null,          "enabled": null,          "children": [            {              "id": 14,              "url": null,              "path": null,              "component": null,              "name": "工资账套管理",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 15,              "url": null,              "path": null,              "component": null,              "name": "员工账套设置",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 16,              "url": null,              "path": null,              "component": null,              "name": "工资表管理",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 17,              "url": null,              "path": null,              "component": null,              "name": "月末处理",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 18,              "url": null,              "path": null,              "component": null,              "name": "工资表查询",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            }          ],          "roles": null        },        {          "id": 5,          "url": null,          "path": null,          "component": null,          "name": "统计管理",          "iconCls": null,          "keepAlive": null,          "requireAuth": null,          "parentId": null,          "enabled": null,          "children": [            {              "id": 19,              "url": null,              "path": null,              "component": null,              "name": "综合信息统计",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 20,              "url": null,              "path": null,              "component": null,              "name": "员工积分统计",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 21,              "url": null,              "path": null,              "component": null,              "name": "人事信息统计",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 22,              "url": null,              "path": null,              "component": null,              "name": "人事记录统计",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            }          ],          "roles": null        },        {          "id": 6,          "url": null,          "path": null,          "component": null,          "name": "系统管理",          "iconCls": null,          "keepAlive": null,          "requireAuth": null,          "parentId": null,          "enabled": null,          "children": [            {              "id": 23,              "url": null,              "path": null,              "component": null,              "name": "基础信息设置",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 24,              "url": null,              "path": null,              "component": null,              "name": "系统管理",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 25,              "url": null,              "path": null,              "component": null,              "name": "操作日志管理",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 26,              "url": null,              "path": null,              "component": null,              "name": "操作员管理",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 27,              "url": null,              "path": null,              "component": null,              "name": "备份恢复数据库",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            },            {              "id": 28,              "url": null,              "path": null,              "component": null,              "name": "初始化数据库",              "iconCls": null,              "keepAlive": null,              "requireAuth": null,              "parentId": null,              "enabled": null,              "children": null,              "roles": null            }          ],          "roles": null        }      ],      "roles": null    }  ]}

2.2前端代码

<template>  <div>    <!-- 添加角色  -->    <div class="permissManaTool">        <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">          <template slot="prepend">ROLE_</template>        </el-input>        <el-input size="small" placeholder="请输入角色中文名" v-model="role.nameZh" @keydown.enter.native="addRole"></el-input>        <el-button size="small" type="primary" icon="el-icon-plus" @click="addRole">添加角色</el-button>    </div>    <!-- 手风琴  -->    <div style="margin-top:10px; width:660px">      <el-collapse v-model="activeName" accordion @change="change">        <el-collapse-item :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index">          <!-- 卡片 -->          <el-card class="box-card">            <div slot="header" class="clearfix">              <span>可访问资源</span>              <el-button style="float: right; padding: 3px 0; color: #ff0000;" type="text" icon="el-icon-delete" @click="doDeleteRole(r)"></el-button>            </div>            <div>              <!-- 树 -->              <el-tree                 show-checkbox                node-key="id"                ref="tree"                :key="index"                :default-checked-keys="selectMenus"                 :data="allMenus" :props="defaultProps"></el-tree>                <div style="display:flex; justify-content: flex-end">                  <el-button size="mini" @click="cancelUpdate">取消修改</el-button>                  <el-button size="mini" type="primary" @click="doUpdate(r.id,index)">确定修改</el-button>                </div>            </div>          </el-card>        </el-collapse-item>      </el-collapse>    </div>  </div></template><script>export default {    data(){      return{        role:{          name:'',          nameZh:''        },        activeName : '-1',        roles:[],        allMenus: [],        // 树菜单的属性，children子菜单的属性，label显示出来的名字,都是后端接口返回来的字段名字        defaultProps: {          children: 'children',          label: 'name'        },        // 树中选中的节点        selectMenus: []      }    },    mounted(){      this.initRoles();          },    methods:{      // 初始化所有菜单      initAllMenus(){        this.getRequest('/system/basic/permiss/menus').then(resp=>{          if(resp.code==200){            this.allMenus = resp.obj;          }        })      },      // 根据角色id获取菜单      initSelectdMenus(rid){        this.getRequest('/system/basic/permiss/mid/'+rid).then(resp=>{          if(resp.code==200){            this.selectMenus = resp.obj;          }        })      },      // 获取角色列表      initRoles(){        this.getRequest('/system/basic/permiss/').then(resp=>{          if(resp.code==200){            this.roles = resp.obj;          }        })      },      // 手风琴点击事件，展开rid是每个name，name对应着后端字段id，关闭时rid为空      change(rid){        if(rid){          this.initAllMenus();          this.initSelectdMenus(rid);        }      },      // 修改角色权限       doUpdate(rid,index){        // 拿到这个手风琴下面的树        let tree = this.$refs.tree[index];        // 传true只打印叶子节点的id        let selectedKeys = tree.getCheckedKeys(true);        let url = '/system/basic/permiss/?rid='+ rid;        selectedKeys.forEach(key => {          url += '&mids='+ key;        });        this.putRequest(url).then(resp=>{          if(resp.code==200){            this.activeName = '-1'          }        })      },      cancelUpdate(){        this.activeName = '-1'      },      // 添加角色      addRole(){        if(this.role.name && this.role.nameZh){          this.postRequest('/system/basic/permiss/',this.role).then(resp=>{            if(resp.code==200){              this.initRoles();              this.role.name = '';              this.role.nameZh = '';            }          })        }else{          this.$message.error("所有字段不能为空");        }      },      // 删除角色      doDeleteRole(role){        this.$confirm('此操作将永久删除'+role.nameZh+'角色, 是否继续?', '提示', {          confirmButtonText: '确定',          cancelButtonText: '取消',          type: 'warning'        }).then(() => {          this.deleteRequest('/system/basic/permiss/role/'+r.id).then(resp => {            if(resp.code == 200){                            this.initRoles();            }else{              this.$message.error(resp.message)            }          })        }).catch(() => {          this.$message({            type: 'info',            message: '已取消删除'          });                  });      }    }}</script><style>.permissManaTool{  display: flex;  justify-content: flex-start;}.permissManaTool .el-input{  width: 300px;  margin-right: 10px;}</style>

值得注意的是：

1：每个角色下面展开的权限树列表用的是手风琴组件（折叠面板）这里还要给树加上key，因为每个手风琴下面都是一个树 折叠面板饿了吗官网

2：树要展示前面的选择框，要给树组件加上show-checkbox属性。:default-checked-keys="selectMenus" 默认选中的key，这个selectMenus需要去data中定义一个数组。

3：在添加时，可通过 let tree = this.$refs.tree[index]; 拿到整个手风琴下面的树，let selectedKeys = tree.getCheckedKeys(true) 获取选中节点的id，修改成功后，把手风琴的折叠属性，定义成-1，折叠即可，因为下次再打开的时候，会去数据库查出这个角色对应菜单的最新数据。