vue3前端请求后端接口动态渲染菜单

//获取数据  请求接口

export function parkEnterPrise(address: string, methods: string) {

const res = instance({

url: address,

method: methods,

});

return res;

}

//页面

<el-menu

default-active="2"

class="el-menu-vertical-demo"

active-text-color="#3656FF"

router

style="

height: 100vh;

background-color: #fff;

color: #0000;

border: none;

"

>

<el-menu-item index="/workbench">

<img

style="width: 20px; margin-right: 10px"

src="../../assets/img/10002.png"

alt=""

/>

<span>工作台</span>

</el-menu-item>

<template v-for="(item,index) in tableData" :key="index">

<el-sub-menu :index="item.component" v-if="item.children">

<template #title>

<img

style="width: 20px; margin-right: 10px"

src="../../assets/img/10002.png"

alt=""

/>

<span>

{{ item.title }}

</span>

</template>

<el-menu-item-group v-for="items in item.children" :key="items.id">

<el-menu-item :index="items.component">{{items.title}}</el-menu-item>

</el-menu-item-group>

 

</el-sub-menu>

 

</template>

</el-menu>

// 获取数据

const tableData = ref([]);

//获取菜单数据

let ceartch = async () => {

let res = await parkEnterPrise(

"/park/user/router",

"GET",

);

console.log(res.data.data);

if (res.data.code == 10000) {

tableData.value = res.data.data;

console.log(tableData.value);

}

};

onMounted(()=>{

ceartch()

})