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

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

直接上代码：遍历组件recursionDropdownItem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!--
 * @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 和 注册（这是基础不懂的百度）。
然后在合适的位置 调用代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>