vue+element el-tree 最详细的使用方法，真实接口数据渲染_vxe和eltree使用

el-tree的使用：
项目：接口给到的数据是嵌套children的，另外接口中的choose字段表示是否被选中，choose : true需要时选中状态；

<div class="menu-permission">
        <p class="title">菜单权限</p>
        <el-tree
          ref="menutree"
          :data="menuList"   // 数据源
          show-checkbox
          :props="menuProps"  
          default-expand-all  //是否默认展开所有节点
          node-key="id"  //每个树节点用来作为唯一标识的属性，整棵树是唯一的
          :default-checked-keys="menuChoose" //默认勾选的节点的 key 的数组
          @check="menuTreeCheck"  //点击节点复选框之后触发
        ></el-tree>
      </div>
1
2
3
4
5
6
7
8
9
10
11
12
13

接口的数据是树结构： 嵌套children

{code: "2000", msg: "操作成功",…}
code: "2000"
data: [{id: 24, label: "项目管理", choose: false}, {id: 1, label: "系统管理", choose: false,…}]
0: {id: 24, label: "项目管理", choose: false}
1: {id: 1, label: "系统管理", choose: false,…}
   children: [{id: 3, label: "菜单管理", choose: false}, {id: 4,       label: "用户管理", choose: true},…]
  choose: false
  id: 1
  label: "系统管理"
  msg: "操作成功"

1
2
3
4
5
6
7
8
9
10
11

处理接口数据

 methods: {
    // 树结构列表
    async getTreeSelect() {
      const res = await this.$API.system.menu.treeSelect.post({roleId: this.form.roleId});
      this.menuList = res.data;  //   接口树结构的数据
      this.menuChoose = [];  //树结构中选中的项
      this.getMenuChoose(res.data)
    },
    // 递归
    getMenuChoose(children){
      for(let item of children){
          if(item.choose){  // item.choose == true表示被选中
            this.menuChoose.push(item.id);
          }
          if(item.children){
            this.getMenuChoose(item.children)
          }
        }
    },
      //点击选中的项
    menuTreeCheck(citem, status) {
      //citem当前点击的项， status勾选节点数据的数组
      const flag = new Set(status.checkedKeys).has(citem.id); //布尔值
      const self = this;
      const changeCheck = function (cld) {
        cld.forEach((i) => {
          self.$refs.menutree.setChecked(i.id, flag);  //setChecked（true）表示选中
          if (i.children) {
            changeCheck(i.children);
          }
        });
      };
      if (citem.children) {
        changeCheck(citem.children);
      }
    },
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37