茉莉兰亭

1
<el-menu v-if="list && list.length" :default-active="defaultActive" unique-opened :router="router">
2
    <menu-item
3
            :list="list"
4
            :base-path="basePath"
5
            :children-attr-name="childrenAttrName"
6
            :key-id-attr-name="keyIdAttrName"
7
            :title-attr-name="titleAttrName"
8
            :articles-attr-name="articlesAttrName"
9
            :article-key-id-attr-name="articleKeyIdAttrName"
10
            :article-title-attr-name="articleTitleAttrName"
11
    ></menu-item>
12
</el-menu>

1
import MenuItem from './MenuItem'
2

3
export default {
4
    name: 'TreeMenu',
5
    components: {
6
        MenuItem
7
    },
8
    props: {
9
        // 是否开启路由
10
        router: {
11
            type: Boolean,
12
            default: false
13
        },
14
        // 数据数组
15
        list: {
16
            type: Array,
17
            default: () => []
18
        },
19
        // 默认打开
20
        defaultActive: {
21
            type: String
22
        },
23
        // 基础路径，允许为空
24
        basePath: {
25
            type: String
26
        },
27
        // 主节点子节点数组属性名
28
        childrenAttrName: {
29
            type: String,
30
            default: 'children'
31
        },
32
        // 主节点id属性名
33
        keyIdAttrName: {
34
            type: String,
35
            default: 'newsCategoryId'
36
        },
37
        // 主节点标题属性名
38
        titleAttrName: {
39
            type: String,
40
            default: 'newsCategoryName'
41
        },
42
        // 文章数组属性名
43
        articlesAttrName: {
44
            type: String,
45
            default: 'articles'
46
        },
47
        // 文章项id属性名
48
        articleKeyIdAttrName: {
49
            type: String,
50
            default: 'newsId'
51
        },
52
        // 文章项标题属性名
53
        articleTitleAttrName: {
54
            type: String,
55
            default: 'newsTitle'
56
        }
57
    },
58
    // 由于外界可能是动态传入此参数，故写在watch内
59
    watch: {
60
        defaultActive(val) {
61
            // 当前路由链接与传入连接一致时，不再跳转，防止跳转相同路径报错
62
            if (this.$route.path !== val) {
63
                this.$router.push(val)
64
            }
65
        }
66
    }
67
}

1
<div>
2
    <!--遍历第一层类目-->
3
    <template v-for="item of list">
4
        <el-submenu :key="item[keyIdAttrName]" :index="`${basePath}/${item[keyIdAttrName]}`">
5
            <span slot="title">{{ item[titleAttrName] }}</span>
6
            <!--递归遍历第二层-->
7
            <menu-item
8
                    :list="item[childrenAttrName]"
9
                    :base-path="basePath"
10
                    :children-attr-name="childrenAttrName"
11
                    :key-id-attr-name="keyIdAttrName"
12
                    :title-attr-name="titleAttrName"
13
                    :articles-attr-name="articlesAttrName"
14
                    :article-key-id-attr-name="articleKeyIdAttrName"
15
                    :article-title-attr-name="articleTitleAttrName"
16
            ></menu-item>
17
            <!--遍历第一层类目文章-->
18
            <el-menu-item v-for="article of item[articlesAttrName]" :key="article[articleKeyIdAttrName]"
19
                          :index="`${basePath}/${article[articleKeyIdAttrName]}`">{{ article[articleTitleAttrName] }}
20
            </el-menu-item>
21
        </el-submenu>
22
    </template>
23
</div>

1
export default {
2
    name: 'MenuItem',
3
    props: {
4
        // 数据数组
5
        list: {
6
            type: Array,
7
            default: () => []
8
        },
9
        // 基础路径，允许为空
10
        basePath: {
11
            type: String,
12
        },
13
        // 主节点子节点数组属性名
14
        childrenAttrName: {
15
            type: String,
16
            default: 'children'
17
        },
18
        // 主节点id属性名
19
        keyIdAttrName: {
20
            type: String,
21
            default: 'newsCategoryId'
22
        },
23
        // 主节点标题属性名
24
        titleAttrName: {
25
            type: String,
26
            default: 'newsCategoryName'
27
        },
28
        // 文章数组属性名
29
        articlesAttrName: {
30
            type: String,
31
            default: 'articles'
32
        },
33
        // 文章项id属性名
34
        articleKeyIdAttrName: {
35
            type: String,
36
            default: 'newsId'
37
        },
38
        // 文章项标题属性名
39
        articleTitleAttrName: {
40
            type: String,
41
            default: 'newsTitle'
42
        }
43
    }
44
}