vue2 element 树形控件 选中二级 显示对应的父级和二级

Vue2 Element UI 的树形组件（`el-tree`）允许你在用户选择某一节点时，展示该节点的父级和子级信息。当你设置节点的 `default-expand-all` 或 `load` 属性，可以实现实时加载数据并动态展开节点。在用户点击二级节点时，可以通过监听 `node-click` 事件来获取选中的节点。

例如，你可以这样操作：

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    @node-click="handleNodeClick"
    default-expand-all
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, label: '父节点1', children: [{ id: 2, label: '二级节点1' }, { id: 3, label: '二级节点2' }] },
        // ... 其他节点...
      ],
    };
  },
  methods: {
    handleNodeClick(node) {
      if (node.level === 2) {
        const parent = node.parent; // 获取当前节点的父节点
        console.log('父节点:', parent.label);
        console.log('二级节点:', node.label);
      }
    },
  },
};
</script>

在这个例子中，当二级节点被点击时，`handleNodeClick` 方法会被触发，通过 `parent` 属性我们可以找到对应的一级父节点。