開始造中級(jí)輪子級(jí)聯(lián)選擇器組件，遇到一個(gè)難題就是無法確定有幾級(jí)彈出框供選擇姨谷，例如以下的數(shù)據(jù)結(jié)構(gòu)谅猾。
data: {
source: [{
name: '浙江',
children: [
{
name: '杭州',
children: [
{name: '上城'},
{name: '下城'},
{name: '江干'},
]
},
{
name: '嘉興',
children: [
{name: '南湖'},
{name: '秀洲'},
{name: '嘉善'},
]
},
]
}, {
name: '福建',
children: [
{
name: '福州',
children: [
{name: '鼓樓'},
{name: '臺(tái)江'},
{name: '倉(cāng)山'},
]
},
]
}]
},
因此得做個(gè)遞歸組件。首先創(chuàng)建級(jí)聯(lián)選擇器父組件cascader.vue
<template>
<div class="cascader">
<div class="trigger">
<slot></slot>
</div>
<div class="popover">
<div v-for="(item,index) in source" :key="index">
<cascader-item :sourceItem="item"></cascader-item>
</div>
</div>
</div>
</template>
<script>
import CascaderItem from './cascader-item'
export default {
name: 'WheelCascader',
components: { CascaderItem },
props: {
source: {
type: Array
}
}
}
</script>
其中cascader-item.vue就是遞歸的級(jí)聯(lián)選擇器子組件嫉拐，需要傳入數(shù)據(jù)sourceItem哩都，是一個(gè)Object，包含name婉徘、children兩個(gè)屬性
<template>
<div class="cascader-item">
{{sourceItem.name}}
<div v-if="sourceItem.children">
<wheel-cascader-item
v-for="(item, index) in sourceItem.children"
:sourceItem="item"
:key="index">
</wheel-cascader-item>
</div>
</div>
</template>
<script>
export default {
name: 'WheelCascaderItem',
props: {
sourceItem: {
type: Object
}
}
}
</script>
<style lang="scss" scoped>
@import 'var';
.cascader-item {
border: 1px solid red;
margin: 10px;
}
</style>
只有當(dāng)傳入的對(duì)象有數(shù)組時(shí)才遞歸調(diào)用自己顯示名稱漠嵌。注意這里只要標(biāo)簽名和組件名name一致，vue就會(huì)智能地認(rèn)為我們調(diào)用了自己這個(gè)組件盖呼，十分類似遞歸函數(shù)的調(diào)用儒鹿。
最后即可正確顯示效果：
級(jí)聯(lián)組件.png
本人造輪子項(xiàng)目：https://github.com/zyqq/wheel 歡迎star
