工作中遇到一个需求：带有y轴scroll的tree需要通过外部的按钮，高亮选中的节点。

由于节点数量超过了div本身的高度，所以不能看到高亮的节点，通过scrollTo方法可以定位滚动条位置，但是节点的相对位置无法直接通过dom获取，所以可以通过计算当前节点的在所有展开节点的位置，最后成功定位。

html代码：

<div id="divTree">
    <el-tree
        ref="tree"
        node-key="id"
        highlight-current
        :data="data"
    >
    </el-tree>
</div>

实现逻辑：

this.$refs.tree.sertCurrnetKey(id) // 通过id高亮选中的tree节点


let level = -1
let dom = document.querySelector('#divTree') // 获取 tree外层的dom
let parentNode = this.$refs.tree.getNode(id) // 通过 id 获取 node
let nodeCount = 0 // tree中展开节点总数
let nodeIndex = 0 // tree中选中节点

// 获取tree节点高度
let treeNode = ducoment.getElementsByClassName("el-tree-node__content")
let nodeHeight = Number(window.getComputedStyle(treeNode[0].height.replace('px',''))

// 通过选中节点 获取顶层父节点 并展开
while(level != 0) {
    this.$refs.tree.store.nodesMap[parentNode.data.id].expanded = true
    parentNode = parentNode.parent
    level = parentNode.level
}


this.$nextTick(() => {
    const getNodeCount = function(val) {
        val.childNodes.forEach(e => {
        nodeCount++
        if (e.isCurrent) {
            nodeIndex = nodeCount
        }
        if (e.expanded) {
            getNodeCount(e)
        }
    })
    getNodeCount(parentNode) // 获取展开节点总数和高亮节点位置

    // 计算 选中节点位置 并通过scrollTo方法定位
    let height = Number(window.getComputedStyle(dom).height.replace('px',''))
    // 计算位置大约在tree中间
    if ((nodeIndex * nodeHeight) > 0.5 * height) {
        dom.srollTo(0, nodeIndex * nodeHeight - 0.5 * height)
    } else {
        dom.scrollTo(0, 0)
    }
})

欢迎关注 PuZzlE 的个人主页 - 动态 - 掘金 (juejin.cn)