vue无限级tree树状结构组件代码

gooood个人博客网站

vue

vue无限级tree树状结构组件代码
父组件：
<template> <div> <recursionchild :total="data"></recursionchild> </div> </template> <script> import recursionchild from 'child.vue' export default { components: { recursionchild }, data: () => ({ data:[ { "name":"aa", "child":[ {"name":"aa-1"}, {"name":"aa-2"}, {"name":"aa-3", "child":[ {"name":"aa-3-1"}, {"name":"aa-3-2"}, {"name":"aa-3-3"}, ] }, ] }, { "name":"bb", "child":[ {"name":"bb-1"}, {"name":"bb-2", "child":[ {"name":"bb-2-1"}, {"name":"bb-2-2"}, {"name":"bb-2-3"}, ] }, {"name":"bb-3"}, ] }, ] }), } </script> 子组件：
<template> <ul> <li v-for="(item,index) in total"> <span>{{item.name}}</span> <recursionchild :total="item.child"></recursionchild> </li> </ul> </template> <script> export default { name: 'recursionchild', props:{ total:Array } , } </script>