elementui下拉树形结构

Element UI 提供了一个名为 `el-tree` 的组件，用于创建树形数据结构的下拉菜单或列表。它支持单选、多选、拖拽以及展开/折叠节点等功能，非常适合展示层级分明的数据。下面是一个基本的使用示例：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
    ref="tree"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '一级一',
          children: [
            {
              label: '二级一',
              children: [{ label: '三级一' }],
            },
            { label: '二级二', children: [] },
          ],
        },
        { label: '一级二', children: [] },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    handleNodeClick(node) {
      console.log('点击了节点:', node);
    },
  },
};
</script>

在这个例子中，`treeData` 是树的数据结构，`defaultProps` 定义了节点默认的属性名。当你点击节点时，`handleNodeClick` 方法会被触发。