vue递归遍历Json树状数据

Posted 2023-05-09

参考技术A json数据格式，循环获取最后一层数据id

 // node 为所有数据及data，arr为最终得到的数组数据,调用函数前先获取父级节点

recursion (node, arr)  

    if (!node.children)  

          //先判断 node节点是否含有children节点，为true 为最后一级，取id ，push到arr数组中

              arr.push(node.id)

      else  

           // false时 非最后一级，含有children，则继续循环children

            node.children.forEach(item => this.recursion(item, arr))

     

   

Vue.js怎样把递归组件构建为树形菜单

Vue.js 递归组件实现树形菜单
main.js 作为入口：

import Vue from \'vue\'import main from \'./components/main.vue\' new Vue( el: \'#app\', render: h => h(main))

它引入了一个组件 main.vue：

<template> <div> <my-tree :data="theData" :name="menuName" :loading="loading" @getSubMenu="getSubMenu"></my-tree> </div></template> <script>const myData = [ id: \'1\', menuName: \'基础管理\', menuCode: \'10\' , id: \'2\', menuName: \'商品管理\', menuCode: \'\' , id: \'3\', menuName: \'订单管理\', menuCode: \'30\', children: [ menuName: \'订单列表\', menuCode: \'31\' , menuName: \'退货列表\', menuCode: \'32\', children: [] ] , id: \'4\', menuName: \'商家管理\', menuCode: \'\', children: [] ]; const subMenuData1 = parentId: \'1\', children: [ menuName: \'用户管理\', menuCode: \'11\' , id: \'12\', menuName: \'角色管理\', menuCode: \'12\', children: [ menuName: \'管理员\', menuCode: \'121\' , menuName: \'CEO\', menuCode: \'122\' , menuName: \'CFO\', menuCode: \'123\' , menuName: \'COO\', menuCode: \'124\' , menuName: \'普通人\', menuCode: \'124\' ] , menuName: \'权限管理\', menuCode: \'13\' ]; const subMenuData2 = parentId: \'2\', children: [ menuName: \'商品一\', menuCode: \'21\' , id: \'22\', menuName: \'商品二\', menuCode: \'22\', children: [ menuName: \'子类商品1\', menuCode: \'221\' , menuName: \'子类商品2\', menuCode: \'222\' ] ]; import myTree from \'./common/treeMenu.vue\'export default components: myTree , data () return theData: myData, menuName: \'menuName\', // 显示菜单名称的属性 loading: false , methods: getSubMenu (menuItem, callback) this.loading = true; if (menuItem.id === subMenuData1.parentId) this.loading = false; menuItem.children = subMenuData1.children; callback(menuItem.children); setTimeout(() => if (menuItem.id === subMenuData2.parentId) this.loading = false; menuItem.children = subMenuData2.children; callback(menuItem.children); , 2000); </script>

subMenuData1, subMenuData2 存放子菜单数据，可以从服务器获取，以实现动态加载。
该文件引入了树形组件 treeMenu.vue：
<template> <ul class="tree-menu"> <li v-for="(item, index) in data"> <span @click="toggle(item, index)"> <i :class="[\'icon\', item.children && item.children.length ? folderIconList[index] : \'file-text\', loading ? loadingIconList[index] : \'\']"></i> item[name] || item.menuName </span> <tree-menu v-if="scope[index]" :data="item.children"></tree-menu> </li> </ul></template> <script>export default name: \'treeMenu\', props: data: Array, name: String, loading: Boolean , data () return folderIconList: [], loadingIconList: [], scope: , created () this.data.forEach((item, index) => if (item.children && item.children.length) this.folderIconList[index] = \'folder\'; ); , methods: doTask (index) this.$set(this.scope, index, !this.scope[index]); this.folderIconList[index] = this.scope[index] ? \'folder-open\' : \'folder\'; , toggle (item, index) this.loadingIconList = []; if (item.children && item.children.length) this.doTask(index); else this.loadingIconList[index] = \'loading\'; this.$emit(\'getSubMenu\', item, (subMenuList) => if (subMenuList && subMenuList.length) this.doTask(index); ); </script> <style scoped>.tree-menu list-style: none;.tree-menu li line-height: 2;.tree-menu li span cursor: default;.icon display: inline-block; width: 15px; height: 15px; background-repeat: no-repeat; vertical-align: -2px;.icon.folder background-image: url(/src/assets/folder.png);.icon.folder-open background-image: url(/src/assets/folder-open.png);.icon.file-text background-image: url(/src/assets/file-text.png);.icon.loading background-image: url(/src/assets/loading.gif); background-size: 15px;</style> 参考技术A 采用路由的重定向即可