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>递归之省市区多层级树形展示</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