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

最新推荐文章于 2024-06-12 11:02:32 发布

Icon_酱

最新推荐文章于 2024-06-12 11:02:32 发布

阅读量999

点赞数

分类专栏：前端 Vue js 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/yytIcon/article/details/120780140

版权

js 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端

12 篇文章 1 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

<!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>

效果图：

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

Icon_酱

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
VUE+递归思想实现省市区多层级树形展示

<!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>递.
复制链接

扫一扫