elementui树状菜单tree_vue+element-ui实现无限级动态菜单树

要实现一个无限级动态菜单树，可以使用 Element UI 的 Tree 组件。以下是一个简单的实现示例：

首先，需要在 Vue 中引入 Element UI 的 Tree 组件：

import { Tree } from 'element-ui';

然后，可以在 Vue 的模板中使用 `el-tree` 标签来渲染 Tree 组件：

<el-tree :data="menuData" :props="treeProps" @node-click="handleNodeClick"></el-tree>

其中，`menuData` 是菜单数据，`treeProps` 是 Tree 组件的属性配置对象，`handleNodeClick` 是 Tree 组件的点击事件处理函数。

接下来，我们来看一下如何实现动态加载菜单数据。首先，需要在 Vue 的 `mounted` 生命周期中调用一个方法来获取菜单数据：

mounted() {
  this.getMenuData();
},
methods: {
  getMenuData() {
    // 通过接口获取菜单数据
  }
}

接着，在菜单数据获取成功后，需要将数据转换成符合 Tree 组件要求的格式，并将数据保存在 Vue 实例的 `menuData` 属性中：

getMenuData() {
  // 通过接口获取菜单数据
  // 将数据转换成符合 Tree 组件要求的格式
  const menuData = convertMenuData(data);
  // 将数据保存在 Vue 实例的 menuData 属性中
  this.menuData = menuData;
}

最后，我们来看一下如何处理 Tree 组件的点击事件。在 `handleNodeClick` 方法中，可以根据节点的 `level` 属性来判断当前节点是否为叶子节点。如果是叶子节点，则可以执行相应的操作，比如打开对应的页面；否则，需要递归获取子节点的数据并更新 Tree 组件的数据源：

handleNodeClick(node) {
  if (node.level === 2) {
    // 点击了叶子节点，执行相应操作
    // 比如打开对应的页面
    window.location.href = node.url;
  } else {
    // 点击了非叶子节点，递归获取子节点数据并更新 Tree 组件的数据源
    const childNodes = await this.getChildNodes(node);
    node.children = childNodes;
    this.menuData = [...this.menuData];
  }
},
async getChildNodes(node) {
  // 通过接口获取子节点数据
  const childNodesData = await getChildrenData(node.id);
  // 将数据转换成符合 Tree 组件要求的格式
  const childNodes = convertMenuData(childNodesData);
  return childNodes;
}

至此，一个简单的无限级动态菜单树就实现了。完整的代码可以参考下面的示例：

<template>
  <el-tree :data="menuData" :props="treeProps" @node-click="handleNodeClick"></el-tree>
</template>

<script>
import { Tree } from 'element-ui';

export default {
  components: {
    [Tree.name]: Tree
  },
  data() {
    return {
      menuData: [],
      treeProps: {
        label: 'name',
        children: 'children'
      }
    };
  },
  mounted() {
    this.getMenuData();
  },
  methods: {
    async getMenuData() {
      // 通过接口获取菜单数据
      const data = await getMenuData();
      // 将数据转换成符合 Tree 组件要求的格式
      const menuData = convertMenuData(data);
      // 将数据保存在 Vue 实例的 menuData 属性中
      this.menuData = menuData;
    },
    async handleNodeClick(node) {
      if (node.level === 2) {
        // 点击了叶子节点，执行相应操作
        // 比如打开对应的页面
        window.location.href = node.url;
      } else {
        // 点击了非叶子节点，递归获取子节点数据并更新 Tree 组件的数据源
        const childNodes = await this.getChildNodes(node);
        node.children = childNodes;
        this.menuData = [...this.menuData];
      }
    },
    async getChildNodes(node) {
      // 通过接口获取子节点数据
      const childNodesData = await getChildrenData(node.id);
      // 将数据转换成符合 Tree 组件要求的格式
      const childNodes = convertMenuData(childNodesData);
      return childNodes;
    }
  }
};
</script>