iView框架编写递归组件Dropdown

首先递归组件核心就是在自己的组件内，渲染自己。
普通的组件递归比较简单，百度一大堆。
但是iView中的Dropdown组件递归有几个需要注意的点。

1. div不能包裹Dropdown
2. div不能包裹DropdownMenu
   否则Dropdown无法正常渲染。

直接上代码：遍历组件recursionDropdownItem

<!--
 * @Description: Description
 * @Author: Test
 * @Date: 2019-08-03 09:56:06
 * @LastEditors: Test
 * @LastEditTime: 2019-08-19 17:00:28
 -->
<template>
  <div style="width:100px">
    <div v-for="(item, index) in data" :key="index">
      <DropdownItem
        v-if="item[propsMap.children] && item[propsMap.children].length == 0"
        @click.native="itemChilk(item)"
      >{{item[propsMap.title]}}</DropdownItem>
      <Dropdown
        placement="right-start"
        v-else-if="item[propsMap.children] && item[propsMap.children].length != 0"
      >
        <DropdownItem @click.native="itemChilk(item)">
          {{item[propsMap.title]}}
          <Icon type="ios-arrow-forward"></Icon>
        </DropdownItem>
        <DropdownMenu slot="list">
          <recursionDropdownItem
            :data="item[propsMap.children]"
            :propsMap="propsMap"
            @itemChilk="itemChilk"
          ></recursionDropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array
    },
    propsMap: {
      type: Object,
      default: {
        title: "title",
        children: "children"
      }
    }
  },
  name: "recursionDropdownItem",

  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    itemChilk(item) {
      this.$emit("itemChilk", item);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>

在其他vue文件中调用，首先import 和 注册（这是基础不懂的百度）。
然后在合适的位置 调用代码

 <Dropdown
          trigger="click"
          class="short-select"
          style="margin-left: 18px"
          v-if="fatherList.length != 0"
        >
          <span style="cursor: pointer;" v-if="showDropDown">
            {{fatherText}}
            <Icon type="ios-arrow-down"></Icon>
          </span>
          <DropdownMenu slot="list">
            <RecursionDropdownItem :data="fatherList" :propsMap="propsMap" @itemChilk="itemChilk"></RecursionDropdownItem>
          </DropdownMenu>
        </Dropdown>