el-tree 解决setcurrentKey 节点定位问题

最新推荐文章于 2024-08-18 12:46:06 发布

shane_young

最新推荐文章于 2024-08-18 12:46:06 发布

阅读量8.7k

点赞数 4

分类专栏： elementUI 文章标签： JavaScript vue elementui

本文链接：https://blog.csdn.net/shane_young/article/details/123730829

版权

elementUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求：

点击树结构右侧区域的按钮，树结构高亮选中的节点，并展开父节点，定位到高亮的节点。

感觉el-tree应该直接可以实现这种操作，但是setcurrentKey方法只实现了高亮节点，没有展开父节点，也没有定位到这个节点。不知道是哪个属性没有设置，还是设置了哪个属性影响了。一个个排查后，始终达不到想要的效果。那好吧，只能手动实现这个功能了。

解决方案：
1、高亮节点后，展开父节点。
2、获取高亮节点的offsetTop，把滚动条的位置定位到这个元素附近。

关键部分代码：

html结构部分：这个地方把el-tree单独封装了组件
父组件中使用：

<div class="tree-box">
   <custom-tree ref="customTree"
   :tree-data="getOntoLogyNodes"
   :tree-expand-all="treeExpandAll"
   :tree-node-key="treeNodeKey"
   @addItem="addTreeItem"
   @deleteItem="deleteTreeItem"
   @editItem="editTreeItem"
   @updateAdd="handleAddUpdate" />
</div>

tree-box高度固定，el-tree作为滚动区域，所以tree-box样式设置如下：

.tree-box {
  width: 100%;
  height: calc(100vh - 196px);
  overflow-y: auto;
}

另外，我们的这个功能点中树结构每个节点的label是唯一的，不会重复，所以node-key设置为label，等同于id。

treeNodeKey: "label",

custom-tree组件template内容：

<template>
  <el-tree
    id="my-tree"
    ref="tree"
    class="tree-view structure-tree"
    :data="treeData"
    highlight-current
    :default-expand-all="treeExpandAll"
    :props="defaultProps"
    :node-key="treeNodeKey"
    :filter-node-method="filterNode"
    :auto-expand-parent="true"
    :accordion="true"
    @node-click="handleNodeClick"
    @node-expand="handleNodeExpand"
  >
    <span slot-scope="{ node, data }" class="custom-tree-node">
      <span class="tooltip">
        <span class="add-f-s-14">{{ data.label }}</span>
      </span>
      <div v-if="node.isCurrent == true" class="operation-view">
        <i
          class="small-operation-btn el-icon-plus"
          @click.stop="handleAdd(data)"
        />
        <i
          class="small-operation-btn el-icon-edit "
          @click.stop="handleEdit(data)"
        />
        <i
          class="small-operation-btn el-icon-delete"
          @click.stop="handleDelete(data)"
        />
      </div>
    </span>
  </el-tree>
</template>

父组件中调用实现

handleClick(name) {
	const node = this.$refs.customTree.$refs.tree.getNode(name);
    this.$nextTick(() => {
      this.$refs.customTree.$refs.tree.setCurrentKey(node);
      if (node && node.parent) {
      	// 展开高亮的节点的父节点
        this.expandParents(node.parent);
        // 此处定时1秒是因为我们没有异步加载el-tree，所以为了能够后续获取到dom，不得不设置定时器。
        setTimeout(() => {
          const dom = document.getElementsByClassName("tree-box")[0];
          const dom1 = document.getElementsByClassName("el-tree-node is-current is-focusable")[0];
          // 这里的104是一个大概位置
          dom.scrollTop = dom1.offsetTop - 104;
        }, 1000);
      }
    });
  });

},
expandParents(node) {
  node.expanded = true;
  if (node.parent) {
    this.expandParents(node.parent);
  }
}