el-tree 滚动条自动定位

参考代码:






getTreeData() {
      this.emptyText = '数据加载中。。。';
      if (this.orgTreeData.length === 0) {
        projectDataAPI.listOrgTree().then(response => {
          this.orgTreeData = response.data;
          if (this.orgTreeData.length === 0) {
            this.emptyText = '暂无数据';
          }

      /**
       *下面的代码是核心代码 滚动到可见范围区 获取树的数据后让指定节点高亮 获取高亮节点距离父元素的顶部距离(offsetTop) 获得父容器的文档内容的高度(scrollHeight) 父容器的高度(clientHeight)
       *当offsetTop > clientHeight 将滚动条滚动到可见区域
       */ this.$nextTick(async () => { await this.$refs.orgTree.setCurrentKey(this.projectId); let nodeOffsetTop = document.querySelector( '.filter-tree .is-current' ).offsetTop; let parentNodeClientHeight = document.querySelector('#filterTree') .clientHeight; let parentNodeScrollHeight = document.querySelector( '.filter-tree .el-tree-node' ).scrollHeight; if (nodeOffsetTop > parentNodeClientHeight) { document.querySelector('#filterTree').scrollTop = nodeOffsetTop - parentNodeClientHeight / 2; } }); }); } },

在项目中使用,自改如下:



                    
                    

你可能感兴趣的:(#,Vue,el-tree,el-tree,滚动条定位)