ant design vue中menu组件递归渲染报错解决

ant design vue中menu组件递归渲染报错

开始递归组件后打开页面后报错如下：

解决如下：

使⽤单⽂件⽅式递归⽣成菜单。Before v2.0,因组件内部会动态更改a-sub-menu的属性，如果拆分单文件，无法将属性挂载到a-sub-menu上，你需要⾃⾏声明属性并挂载，为了⽅便，避免属性的声明，推荐使⽤函数式组件。

开始封装的menuItem组件代码：

<template>
   <a-menu-item
    :key="item.key"
    v-if="item.children && item.children.length == 0"
  >
    <template v-if="item.icon">
      <a-icon :type="item.icon" />
    </template>
    <span>{{ item.title }}</span>
  </a-menu-item>
  <a-sub-menu :key="item.key" v-else>
    <span slot="title">
      <template v-if="item.icon">
        <a-icon :type="item.icon" />
      </template>
      <span>{{ item.title }}</span>
    </span>
    <menu-item :item="elm" v-for="elm in item.children" :key="elm.key" />
  </a-sub-menu>
</template>

<script>
export default {
  name: 'menuItem',
  components: {},
  props: {
    item: {}
  },
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style lang="less">
.ant-layout,
.ant-layout-has-sider {
  height: 100%;
}
.ant-menu.ant-menu-inline.ant-menu-root.ant-menu-dark {
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100% - 64px);

  /* 定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸 */
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #f5f5f5;
  }
  /* 定义滚动条轨道 内阴影+圆角 */
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    // border-radius: 5px;
    background-color: #f5f5f5;
  }
  /* 定义滑块 内阴影+圆角 */
  &::-webkit-scrollbar-thumb {
    // border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #001529;
  }
}
.ant-menu-item {
  margin-top: 0 !important;
}
</style>
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
70
71

更改为函数式组件代码如下：
1、模板声明为函数式组件functional；
2、把原先子组件接受的值item前面添加props（根据传递的值更改）；

<template functional>
  <a-menu-item
    :key="props.item.key"
    v-if="props.item.children && props.item.children.length == 0"
  >
    <template v-if="props.item.icon">
      <a-icon :type="props.item.icon" />
    </template>
    <span>{{ props.item.title }}</span>
  </a-menu-item>
  <a-sub-menu :key="props.item.key" v-else>
    <span slot="title">
      <template v-if="props.item.icon">
        <a-icon :type="props.item.icon" />
      </template>
      <span>{{ props.item.title }}</span>
    </span>
    <menu-item :item="elm" v-for="elm in props.item.children" :key="elm.key" />
  </a-sub-menu>
</template>

<script>
export default {
  name: 'menuItem',
  components: {},
  props: {
    item: {}
  },
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style lang="less">
.ant-layout,
.ant-layout-has-sider {
  height: 100%;
}
.ant-menu.ant-menu-inline.ant-menu-root.ant-menu-dark {
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100% - 64px);

  /* 定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸 */
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #f5f5f5;
  }
  /* 定义滚动条轨道 内阴影+圆角 */
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    // border-radius: 5px;
    background-color: #f5f5f5;
  }
  /* 定义滑块 内阴影+圆角 */
  &::-webkit-scrollbar-thumb {
    // border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #001529;
  }
}
.ant-menu-item {
  margin-top: 0 !important;
}
</style>
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
70
71

父组件的代码也粘贴出来如下：

<template>
  <div class="home">
    <a-layout>
      <a-layout-sider>
        <div class="logo">logo</div>
        
        <a-menu
          :default-selected-keys="[1]"
          :default-open-keys="['sub1']"
          mode="inline"
          theme="dark"
        >
          <menuItem :item="item" v-for="item in menuList" :key="item.key" />
        </a-menu>
        
      </a-layout-sider>
      <a-layout>
        <a-layout-header>header</a-layout-header>
        <a-layout-content>Content</a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import menuItem from './menuItem.vue';

export default {
  name: 'Home',
  components:{
    menuItem
  },
  data() {
    return {
      menuList: [
        {
          key: 1,
          icon: 'pie-chart',
          title: '首页',
          children: []
        },
        {
          key: 2,
          icon: 'desktop',
          title: '表格',
          children: []
        },
        {
          key: 3,
          icon: 'inbox',
          title: '选择框',
          children: []
        },
        {
          key: 'sub1',
          icon: 'mail',
          title: '表单',
          children: [
            {
              key: '5',
              icon: 'mail',
              title: '输入框',
              children: []
            },
            {
              key: '6',
              icon: 'mail',
              title: '选择框',
              children: []
            }
          ]
        },
        {
          key: 'sub2',
          icon: 'appstore',
          title: '上传下载',
          children: [
            {
              key: '9',
              icon: '',
              title: '上传',
              children: []
            },
            {
              key: '10',
              icon: '',
              title: '下载',
              children: []
            },
            {
              key: 'sub3',
              icon: '',
              title: '其他',
              children: [
                {
                  key: '11',
                  icon: '',
                  title: '其他1',
                  children: []
                },
                {
                  key: '12',
                  icon: '',
                  title: '其他2',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    getData: function (record) {
      console.log(record)
    }
  }
}
</script>

<style lang="less">
.home {
  width: 100%;
  height: 100%;
  .title {
    font-size: 40px;
    letter-spacing: 2px;
  }
}
.logo {
  height: 64px;
  line-height: 64px;
  color: #fff;
}
</style>
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

改后的menu页面效果如下：