实现级联选择器组件

开始造中级轮子级联选择器组件，遇到一个难题就是无法确定有几级弹出框供选择，例如以下的数据结构。

  data: {
     source: [{
      name: '浙江',
      children: [
        {
          name: '杭州',
          children: [
            {name: '上城'},
            {name: '下城'},
            {name: '江干'},
          ]
        },
        {
          name: '嘉兴',
          children: [
            {name: '南湖'},
            {name: '秀洲'},
            {name: '嘉善'},
          ]
        },
      ]
    }, {
      name: '福建',
      children: [
        {
          name: '福州',
          children: [
            {name: '鼓楼'},
            {name: '台江'},
            {name: '仓山'},
          ]
        },
      ]
    }]
  },

因此得做个递归组件。首先创建级联选择器父组件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就是递归的级联选择器子组件，需要传入数据sourceItem，是一个Object，包含name、children两个属性

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

只有当传入的对象有数组时才递归调用自己显示名称。注意这里只要标签名和组件名name一致，vue就会智能地认为我们调用了自己这个组件，十分类似递归函数的调用。
最后即可正确显示效果：

级联组件.png
本人造轮子项目：https://github.com/zyqq/wheel 欢迎star