Project-Annex/operationSupport/src/components/common/MenuTree.vue

<template>
    <div>
        <template v-for="item in menuList">
            <el-submenu v-if="!!item.children" :index="'/' + item.linkPath" :key="item.id">
                <template slot="title">
                    <img
                        :src="`${envConfig.baseImgApi}${
                            openArray.includes(item.linkPath) ? item.menuDynamicImage || item.menuImage : item.menuImage
                        }`"
                        style="width: 14px; height: 14px; margin-right: 10px"
                    />
                    <span v-if="!collapse" slot="title">{{ item.name }}</span>
                </template>
                <menu-tree :menuList="item.children" :openArray="openArray" />
            </el-submenu>
            <el-menu-item v-else :index="'/' + item.linkPath" :key="item.id">
                <img
                    :src="`${envConfig.baseImgApi}${
                        openArray.includes(item.linkPath) ? item.menuDynamicImage || item.menuImage : item.menuImage
                    }`"
                    style="width: 14px; height: 14px; margin-right: 10px"
                />
                <span slot="title">{{ item.name }}</span>
            </el-menu-item>
        </template>
    </div>
</template>
<script>
import MenuTree from './MenuTree.vue';
import envConfig from '@/config';
export default {
    name: 'MenuTree',
    data() {
        return {
            envConfig: envConfig
        };
    },
    components: {
        MenuTree
    },
    computed: {
        onRoutes() {
            return this.$route.path;
        }
    },
    methods: {},
    props: {
        menuList: {
            type: Array,
            default: () => []
        },
        collapse: {
            type: Boolean,
            default: false
        },
        openArray: {
            type: Array,
            default: () => []
        }
    },
    created() {}
};
</script>