el-tree小知识点

　　

<el-tree
            ref="tree"
            :props="props"
            :data="initData"
            node-key="Id"
            :default-expanded-keys="['table']"
            :highlight-current="true"
            :expand-on-click-node="true"
            @node-click="getContent"
            empty-text="没有获取到数据"
          >
            <!-- @node-click="getContent" -->
          </el-tree>

:default-expanded-keys方法可以展开指定node-key的树节点，我这里写的是key为’table‘的节点，也可以写一个变量动态绑定。

node-key="Id" 中的Id指的是 :data="initData" 中的 initData 数组里对象的一个属性名。

// 跳转点击
    listLink(data) {
      this.parentNodes = data;
      // this.$refs.article.scrollTop = 0;
      if (this.reg.test(this.parentNodes)) {
        this.$nextTick(() => {
          document.getElementById(this.parentNodes).scrollIntoView(true);
        });
      } else {
        this.$refs.tree.setCurrentKey(this.parentNodes);
      }
    },

document.getElementById(this.parentNodes).scrollIntoView(true); 是让页面跳到指定Id的代码，但是如果页面还没有加载完成就跳，很可能出现跳转错误的情况，所以在前面添加 this.$nextTick( ) 方法，让页面渲染完成后才进行下一步。

this.$refs.tree.setCurrentKey(this.parentNodes); 中 setCurrentKey 方法是通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性，参数为 key ，选中状态表示为高亮状态 ， 若选中子节点，其父节点会自动展开。