Element-UI中Tree(树形结构)递归调用

        递归调用判断key ,来切换value

 

    // 树形结构递归调用
    const cheangeAreaData = (data) => {
      // console.log(data)
      const arr = []
      data.forEach(item => {
        for (const key in item) {
          // 判断key
          if (key === 'meta') {
            item[key] = item[key].title
            arr.push(item)
          }

          // 判断key
          if (key === 'children') {
            if (item.children.length > 0) {
              cheangeAreaData(item.children) // 递归调用
            } else {
              delete item[key].children
            }
          }
        }
      })
      return arr
    }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现一个无限级动态菜单树,可以使用 Element UITree 组件。以下是一个简单的实现示例: 首先,需要在 Vue 引入 Element UITree 组件: ```javascript import { Tree } from 'element-ui'; ``` 然后,可以在 Vue 的模板使用 `el-tree` 标签来渲染 Tree 组件: ```html <el-tree :data="menuData" :props="treeProps" @node-click="handleNodeClick"></el-tree> ``` 其,`menuData` 是菜单数据,`treeProps` 是 Tree 组件的属性配置对象,`handleNodeClick` 是 Tree 组件的点击事件处理函数。 接下来,我们来看一下如何实现动态加载菜单数据。首先,需要在 Vue 的 `mounted` 生命周期调用一个方法来获取菜单数据: ```javascript mounted() { this.getMenuData(); }, methods: { getMenuData() { // 通过接口获取菜单数据 } } ``` 接着,在菜单数据获取成功后,需要将数据转换成符合 Tree 组件要求的格式,并将数据保存在 Vue 实例的 `menuData` 属性: ```javascript getMenuData() { // 通过接口获取菜单数据 // 将数据转换成符合 Tree 组件要求的格式 const menuData = convertMenuData(data); // 将数据保存在 Vue 实例的 menuData 属性 this.menuData = menuData; } ``` 最后,我们来看一下如何处理 Tree 组件的点击事件。在 `handleNodeClick` 方法,可以根据节点的 `level` 属性来判断当前节点是否为叶子节点。如果是叶子节点,则可以执行相应的操作,比如打开对应的页面;否则,需要递归获取子节点的数据并更 Tree 组件的数据源: ```javascript 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; } ``` 至此,一个简单的无限级动态菜单树就实现了。完整的代码可以参考下面的示例: ```html <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> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值