• eltree 让已选择的节点后滚动到最顶部


    <el-tree
                :empty-text="emptyText"
                id="filterTree"
                class="filter-tree"
                style="overflow:scroll; overflow-x: hidden;flex:1;"
                :style="{ height: tHeight - 60 + 'px' }"
                node-key="id"
                :data="orgTreeData"
                :props="defaultProps"
                @node-click="getNodeData"
                default-expand-all
                highlight-current
                ref="orgTree"
                :filter-node-method="filterNode"
              >
              </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;
                }
              });
            });
          }
        },
    

      

    代码搬运工
  • 相关阅读:
    阿里云https证书Apache配置
    srvany.exe读取配置文件问题
    outlook检查姓名快捷键
    PHP ftp获取目录内容为空
    php 导出csv表格文件
    lnmp 多站点配置负载均衡
    rabbitmq集群方案
    如何让docker以daemon方式运行/bin/bash
    [mutt] Configure mutt to receive email via IMAP and send via SMTP
    linux邮件客户端mutt日志文件,发不出邮件
  • 原文地址:https://www.cnblogs.com/tw6668/p/15663798.html
Copyright © 2020-2023  润新知