el-tree 滚动条自动定位

最新推荐文章于 2024-01-09 17:32:22 发布

菜鸟学编程

最新推荐文章于 2024-01-09 17:32:22 发布

阅读量1.6k

点赞数 1

分类专栏： # Vue 文章标签： el-tree el-tree 滚动条定位

本文链接：https://blog.csdn.net/gtosky4u/article/details/126538572

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

参考代码：

<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 = '暂无数据';
          }<br><br>　　　　　　/**<br>　　　　　　　*下面的代码是核心代码 滚动到可见范围区  获取树的数据后让指定节点高亮 获取高亮节点距离父元素的顶部距离(offsetTop) 获得父容器的文档内容的高度(scrollHeight) 父容器的高度（clientHeight）<br>　　　　　　　*当offsetTop > clientHeight 将滚动条滚动到可见区域 <br>　　　　　　　*/<em id="__mceDel">
          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;
            }
          });
        });
      }
    },

在项目中使用，自改如下：

<template>
  <div v-if="update">
    <el-popover v-model="visible" popper-class="selectTree" placement="bottom-start" transition="fade-in-linear" min-width="200" trigger="click">
      <el-tree
        ref="tree1"
        :data="data"
        :props="defaultProps"
        empty-text="无数据"
        :node-key="defaultProps.id"
        :default-expanded-keys="defaultExpandedKeys"
        :check-on-click-node="true"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :auto-expand-parent="true"
        :highlight-current="true"
        @node-click="handleNodeClick"
      />
      <el-input
        slot="reference"
        v-model="filterText"
        :placeholder="placeholder"
        :disabled="disabled"
        :clearable="clearable"
        :suffix-icon="icon"
        @clear="clear"
        @click.native="handleClick"
      />
    </el-popover>
  </div>
</template>
<script>


export default {
 watch: {
    visible(val) {
      if (val === true) {
        this.icon = 'el-icon-arrow-up'
        this.$refs.tree1.setCurrentKey(this.value)
        if (this.value) {
          // this.defaultExpandedKeys = this.value
          var ss = this.$refs.tree1.getCurrentNode()
          if (ss) {
            this.expandParents(ss)

            // 滚动到当前节点 开始

            this.$nextTick(async() => {
              await this.$refs.tree1.setCurrentKey(this.value)
              var nodeOffsetTop = document.querySelector('.selectTree .is-current').offsetTop
              var parentNodeClientHeight = document.querySelector('.el-popover').clientHeight
              if (nodeOffsetTop > parentNodeClientHeight) {
                document.querySelector('.el-popover').scrollTop = nodeOffsetTop - parentNodeClientHeight / 2
              }
            })

            // 滚动到当前节点 结束
          }
        }
      } else {
        this.icon = 'el-icon-arrow-down'
      }
    }
  }
}