el-tree树节点的方法

1.展示高亮功能

:highlight-current=“true”

2.默认高亮节点

:default-expanded-keys=“treeExpandData”
treeExpandData为数组
设置此方法，必须设置node-key=“id”，id是你数据的唯一标识

3.默认选中节点

有时候el-tree树的功能是默认选中
先给el-tree设置show-checkbox，把树节点设置为多选框
默认选中功能，需要设置 :default-checked-keys="treeDataId"此属性
treeDataId的值是节点的id，因为我设置的node-id

4.默认展开所有节点

:default-expand-all=‘true’

页面初始化展开所有节点，加此属性

5.自定义加载树的节点

有时候，树的节点数据过于庞大，需要el-tree的懒加载功能，

//节点属性分析
data是树的数据，我在上篇文章中写看如何一维数组转化为多维数组，就是方便el-trees数据的使用
 default-expand-all 是默认展开所有节点
 default-checked-keys，因为我此组件用到的多选功能，所以我设置看把el-tree变为前面加多选框功能
 default-expanded-keys，此属性是测试el-tree设置默认回显功能的
 
 
  <el-tree :data="treedata" default-expand-all :default-checked-keys="treeDataId" :default-expanded-keys="treeExpandData"
                        show-checkbox node-key="id" ref="tree" @check-change='changeTreeItem' :props="props">
                    </el-tree>

//页面初始化就会调此函数
loadNode(node, resolve) {
//node.level 代表节点=等级
                //如果展开第一级节点，从后台加载一级节点列表
                if (node.level == 0) {
                    this.loadfirstnode(resolve);
                }
                //如果展开其他级节点，动态从后台加载下一级节点列表
                if (node.level >= 1) {
                    this.loadchildnode(node.data.id, resolve);
                }
            },
            //加载第一级节点
            loadfirstnode(resolve) {
          
                this.firstNode().then((res) => {
                    let arr = res.filter((item) => {
                        return item.org_parent_node_id == "";
                    });
                    setTimeout(() => {
                        //默认展开第一层节点
                        this.treeExpandData.push(arr[0].id);

                        return resolve(arr);
                    }, 300);
                });

            },
            //加载节点的子节点集合
            //loadchildnode是我获取子节点的接口
            //为了使树节点每次更新的时候，不至于全面刷新，加上setTimeout
            loadchildnode(id, resolve) {
                this.childNode(id).then((res) => {
                    //判断如果是修改的时候不显示自己的节点
                    let arr = res
                    setTimeout(() => {
                        return resolve(arr);
                    }, 300);
                });
            },
            
           

6.默认选中功能

有时候，需求会有默认展开功能

//页面初始化需要加此函数
//nextTick代表页面全部更新成功以后，id就是节点的唯一标识
this.$nextTick(function () {
          this.$refs.tree.setCurrentKey(arr[0].id);
              });

如有不懂请留言