需求: 列表的层级是不定的!常用的情况是,级联选择器,和树形控件。
递归组件:指组件在模版中调用自己,开启递归的条件就是组件中设置name选项。
组件list递归组件: 父级无论多少数据,都可以完美自适应加载
<template>
<div class="boxwrapper">
<div class="list-item" v-for="(item,index) in list" :key="index">
<div class="item-name">
{{item.name}}
</div>
<div v-if="item.children" class="children-item" :style="styleObj">
<list :list="item.children"></list>
</div>
</div>
</div>
</template>
<script>
export default {
name:"List",
props:{
list:Array
},
data() {
return {
styleObj:{'margin-left':'20px', 'font-size':"16px"}
}
}
}
</script>
<style lang="stylus" scoped>
.boxwrapper
border:1px dotted #ccc;
.list-item
background: #fff
height: 100%
</style>
父级:
<template>
<div class="recursiveComponent">
<list :list="list"></list>
</div>
</template>
<script>
import List from './common/List.vue'
export default {
name:"recursiveComponent",
components:{ List },
data() {
return {
list: [
{
name: "一级",
children: [
{
name: "二级",
children: [
{
name: "2——1——1"
}, {
name: "2——1——2"
}]
},
{
name: "二级",
children: [
{
name: "2——1——3"
}, {
name: "2——1——4"
}]
}]
},
{
name: "一级",
children: [
{
name: "二级",
children: [
{
name: "2——1——5"
},
{
name: "三级",
children: [{
name: "3——1——1"
}, {
name: "3——1——1"
}]
}]
},
{
name: "二级",
children: [
{
name: "2——1——7"
}, {
name: "2——1——8"
}]
}]
},
]
}
}
}
</script>
<style lang="stylus" scoped>
.recursiveComponent {
}
</style>
动态样式:用:style的方式 记得style前面加冒号。样式写在data里面即可