树形结构： el-tree

el-tree的所有属性：

1、data: 数据源 【】

2、show-checkbox: 显示选择框

3、node-key: 每个节点的唯一标识，通常是data数据源中的key名：一般是 id

4、default-expanded-keys:  默认展开【要展开的所有节点的id】

5、default-checked-keys: 【要选择的所有节点的id】

6、props:   配置项 { label,children}

     label：节点的文字标题

    children：节点的子节点的值

    “lable”和“children”都来源于data绑定的数据源中的该数据的key名，“lable”和“children”

7、 default-expand-all :    el-tree标签添加该属性即可展开所有节点

方法：

1、getHalfCheckedKeys ： 获取半选的所有id的数组

2、getCheckedKeys：  获取全选的id的数组

 

展开所有节点的方法：

1、el-tree标签: 添加default-expanded-all属性即可展开所有节点

2、el-tree标签:

 1) 添加default-expanded-keys = “expand”,

 2) data中定义arrexpand：【】

 3）获取数据后，遍历获取所有的id，赋值给arrexpand即可展开所有选项

获取所有要展开的权限的id
var temp = [];
this.treeList.forEach((item1) => {
     temp.push(item1.id);
     item1.children.forEach((item2) => {
        temp.push(item2.id);
         item2.children.forEach((item3) => {
          temp.push(item3.id);
         });
     });
});
this.arrexpand = temp;

 

怎么在el-tree 标签中使用js方法：

1、给要操作的标签（el-tree） 设置属性： ref = "tree"

2、this.$refs.ref属性值.js方法名（）:   

     let arr1 = this.$refs.tree. getCheckedKeys();

　  let arr2 = this.$refs.tree.getHalfCheckedKeys();

     let arr = [...arr1,...arr2];