开发中经常要处理一些树形结构的数据和组件，操作比较繁琐，所以对开发过程中做过的一些经验进行整理

el-tree的简单使用范例：

1. el-tree的递归获取默认叶子节点并选中，以及点击叶子节点的操作

tree的常用属性和事件讲解
属性

:props="defaultProps"

defaultProps: {
    children: "children",
    label: "label",
}

props可以指定数组中的那个属性名作为我们树结构来展示的，例如后端返回的数据结构如下：

我们需要name和children来作为展示和子节点遍历的（懂这个意思就行，描述的不是很好），那我们的props值就可以改为如下：

defaultProps: {
    children: 'children',
    label: 'name'
},

事件

@node-click="handleNodeClick"

handleNodeClick(data, node, elementNode) {
  console.log("data, node, elementNode", data, node, elementNode);
  console.log("返回被选中(点击)的节点:", node.data.name);
}

完整源码

html
复制代码
<template>
  <div class="treebox">
    <el-tree
      ref="tree"
      :data="treeData"
      :default-expanded-keys="expendNodesItems.map((e) => e.id)"
      :current-node-key="currentNodeKey"
      :props="defaultProps"
      node-key="id"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>
export default {
  name: "tree",
  data() {
    return {
      treeData: [
        {
          id: "1",
          label: "培训需求",
          children: [
            {
              id: "1-1",
              label: "全部",
              refName: "trainNeedsAll",
            },
            {
              id: "1-2",
              label: "短期需求",
              refName: "trainSD",
            },
            {
              id: "1-3",
              label: "中长期需求",
              children: [
                {
                  id: "1-3-1",
                  label: "需求管理",
                  refName: "trainMLDM",
                },
                {
                  id: "1-3-2",
                  label: "需求项管理",
                  refName: "trainMLDIM",
                },
              ],
            },
          ],
        },
        {
          id: "2",
          label: "培训计划",
        },
        {
          id: "3",
          label: "培训管理",
        },
        {
          id: "4",
          label: "培训评估",
        },
        {
          id: "5",
          label: "专家库管理",
        },
        {
          id: "6",
          label: "岗位-能力关系",
        },
      ], //树状结构数据
      expendNodesItems: [], //默认开展的数组
      currentNodeKey: "", //当前选中的node的id值
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    this.currentNodeKey = this.getTreeId(this.treeData).id; //使用递归找到默认第一次打开的叶子节点的id，然后将它选中
  },
  methods: {
    getTreeId(arr) {
      let obj = arr.find((a) => {
        if (a.refName && a.refName == "trainSD") {
          this.treeItem = a;
          return true;
        } else {
          if (
            Object.prototype.toString.call(a.children).slice(8, -1) == "Array"
          ) {
            if (this.getTreeId(a.children)) {
              return true;
            }
          }
        }
      });
      this.expendNodesItems.unshift(obj); //在递归的过程中找到所有expend的节点的数组
      return this.treeItem;
    },
    handleNodeClick(data, node, elementNode) {
      if (node.isLeaf && data.refName) {
        //如果是叶子节点,则触发一些事件...
        console.log("data, node, elementNode", data, node, elementNode);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-tree {
  .el-tree-node__children .el-tree-node.is-focusable,
  .el-tree-node.is-focusable {
    &.is-focusable {
      > .el-tree-node__content {
        background-color: #fff !important;
        color: black !important;
      }
    }
    &.is-current.is-focusable {
      > .el-tree-node__content {
        background-color: tomato !important;
        color: white !important;
      }
    }
  }
}
</style>

页面效果如下：