el-tree使用笔记---定位到指定节点，查找其所有父级节点，并展开，vue组件动态引入

<template>
  <div class="top">
    <el-tree
        ref="tree"
        :data="data"
        :props="defaultProps"
        accordion
        :expand-on-click-node="true"
        auto-expand-parent
        highlight-current
        node-key="code"
        :default-expanded-keys="defaultShowNodes"
        @node-click="handleNodeClick"
      >
        
        <span slot-scope="{data}" class="custom-tree-node">
          <span class="treeSpan">{{ data.name }}span>
          <span>{{ data.contentTotal }}篇span>
        span>
      el-tree>    
    div>
template>

<script>
export default {
  components: {
    ShareDialog
  },
  data() {
    return {
      data: [{
        id: '1',
        name: '测试节点1',
        code: '001',
        subs: [{
          id: '11',
          name: '测试节点11',
          code: '001001',
          subs: [{
            id: '111',
            name: '测试节点111',
            code: '001001001'
          }, {
            id: '112',
            name: '测试节点112',
            code: '001001002'
          }]
        }, {
          id: '12',
          name: '测试节点12',
          code: '001002'
        }]
      }, {
        id: '2',
        name: '测试节点2',
        code: '002'
      }],
      defaultProps: {
        children: 'subs',
        label: 'name'
      },
      nodeParentAll: [],
      props: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {
    // 通过计算属性动态引入组件
    loadPage() {
      return () => import('@/components/page.vue')
    },
    // 通过计算属性动态引入组件
    loadCollect() {
      return () => import('@/components/collect.vue')
    }
  },
  methods: {
    // 通过节点的key（这里使用的是数据中的code属性，node-key="code"）获取并高亮显示指定节点，并展开其所有父级节点
    getAndExpandAll(nodeKey) {
      if (nodeKey) {
        this.$nextTick(() => { // 等待树组件渲染完成再执行相关操作
          // 获取节点
          const node = this.$refs.tree.getNode(nodeKey)
          if (node) {
            // 获取其所有父级节点
            this.getParentAll(node)
            if (this.nodeParentAll.length > 0) {
              // 将获取到的所有父级节点进行展开
              for (var i = 0, n = this.nodeParentAll.length; i < n; i++) {
                this.$refs.tree.store.nodesMap[this.nodeParentAll[i].data.code].expanded = true
              }
            }

            // 将节点高亮显示
            this.$refs.tree.setCurrentKey(nodeKey)
          }
        })
      }
    },
    // 获取所有父级节点
    getParentAll(node) {
      if (node) {
        this.nodeParentAll = []
        // 节点的第一个父级
        var parentNode = node.parent
        // level为节点的层级 level=1 为顶级节点
        for (var j = 0, lv = node.level; j < lv; j++) {
          if (parentNode.level > 0) {
            // 将所有父级节点放入集合中
            this.nodeParentAll.push(parentNode)
          }
          // 继续获取父级节点的父级节点
          parentNode = parentNode.parent
        }

        if (this.nodeParentAll.length > 1) {
          // 如果集合长度>1 则将数组进行倒叙.reverse() 其是就是将所有节点按照 从 顶级节点 依次往下排
          this.nodeParentAll.reverse()
        }
      }
    },
  }
}

script>

每天进步一点点，点滴记录，积少成多。

以此做个记录，

如有不足之处还望多多留言指教！