VUE+递归思想实现省市区多层级树形展示

2021-10-15 14:34:55 阅读：293 来源： 互联网

标签：VUE name 递归 children item 层级省市区 id

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>递归之省市区多层级树形展示</title>
    </title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">

        <!-- <ul v-for="item in message" :key="item.id">
            <li>
                {{item.name}}
                <ul v-if="item.children" v-for="i in item.children">
                    <li>
                        {{i.name}}
                        <ul v-if="item.children" v-for="i in item.children">
                            <li>
                                {{i.name}}
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul> -->

        <!-- 上面那部分是原始的写法，可以看到
          <li>
            {{item.name}}
            <ul v-if="item.children" v-for="i in item.children">
        这一段重复了多次，如果子集无线增多，就需要不停的写同样的代码，很麻烦，且不好控制，所以就需要使用递归的思想，具体如下 -->

        <ul v-for="item in message" :key="item.id">
            <child-com :item="item"></child-com>
        </ul>

    </div>
    <script>
        let arr = [{
                id: 1,
                name: "四川省",
                children: [{
                        id: 101,
                        name: "成都市",
                        children: [{
                                id: 10101,
                                name: "武侯区"
                            },
                            {
                                id: 10102,
                                name: "双流区",
                                children: [{
                                    id: 1010201,
                                    name: "XXXXX街道",
                                    children: [{
                                            id: 111,
                                            name: "sss"
                                        }
                                    ]
                                }]
                            }
                        ]
                    },
                    {
                        id: 102,
                        name: "达州市",
                        children: [{
                                id: 10201,
                                name: "通川区"
                            },
                            {
                                id: 10202,
                                name: "达川区"
                            }
                        ]
                    }
                ]
            },
           
            {
                id: 3,
                name: "湖北省",
                children: [
                    {
                        id: 302,
                        name: "武汉市",
                        children: [{
                                id: 30201,
                                name: "江汉区"
                            },
                            {
                                id: 30202,
                                name: "武昌区"
                            }
                        ]
                    }
                ]
            }
        ]

        Vue.component('child-com', {
            data() {
                return {
                }
            },
            props: ['item'],
            template: 
            `  
                <li>
                    {{item.name}}
                    <ul v-if="item.children" v-for="i in item.children">
                       <child-com :item="i"></child-com>
                    </ul>
                </li>
            `
        })

        var app = new Vue({
            el: "#app",
            data: {
                message: arr

            }
        })
    </script>
</body>

</html>

效果图：

这样不管后面需要加多少层级关系，只需要在原始数据里面按照那个格式修改数据即可。

标签：VUE,name,递归,children,item,层级,省市区,id
来源： https://blog.csdn.net/yytIcon/article/details/120780140

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE+递归思想实现省市区多层级树形展示