寫在前面
和大家不太一樣，我覺得今年的自己更加relax，沒有親戚要走，沒有朋友相聚，也沒有很好的哥們要去敘舊，更沒有無知的相親，甚至可以這么說沒有那些閑得慌的鄰居。
也可以說是從今天開始，算是可以進(jìn)入自己的小世界，做自己想做的事，看看書，學(xué)習(xí)一下。
生活的精髓在于善待自己，用心感受每一刻的歡愉與寧靜！
人生于世上有幾個(gè)知己，多少友誼能長存，愿友誼常青！
菜單顯示分類名
那么如何讓菜單正常顯示菜單內(nèi)容呢？
1、任務(wù)拆解
- 在頁面加載就查出所有分類
- 通過垂直菜單遍歷出所有分類內(nèi)容并顯示
2、在頁面加載就查出所有分類
即在onMounted種通過handleQueryCategory，此處可以復(fù)用分類列表中的代碼，示例代碼如下：
const level1 = ref();
let categorys: any;
/**
* 查詢所有分類
**/
const handleQueryCategory = () => {
axios.get("/category/all").then((response) => {
const data = response.data;
if (data.success) {
categorys = data.content;
console.log("原始數(shù)組：", categorys);
level1.value = [];
level1.value = Tool.array2Tree(categorys, 0);
console.log("樹形結(jié)構(gòu)：", level1.value);
} else {
message.error(data.message);
}
});
};
onMounted(() => {
handleQueryCategory();
}
3、通過垂直菜單遍歷出所有分類內(nèi)容并顯示
這塊還是考察的是v -for循環(huán)遍歷的知識(shí)點(diǎn)，示例代碼如下：
<a-sub-menu v-for="item in level1" :key="item.id">
<template v-slot:title>
<span><user-outlined />{{item.name}}</span>
</template>
<a-menu-item v-for="child in item.children" :key="child.id">
<MailOutlined /><span>{{child.name}}</span>
</a-menu-item>
</a-sub-menu>
4、效果
寫在最后
這部分的代碼，是純前端了， 代碼扔太久了，只能看懂，但是自己寫還是寫不出來，我想這種狀態(tài)，可能是很多新手，都會(huì)面臨的問題吧。
有沒有好的解決辦法呢？
沒有，在成功這條路上，永遠(yuǎn)是沒有捷徑可言的。文章來源：http://www.zghlxwxcb.cn/news/detail-825149.html
如不適應(yīng)，去練習(xí)，大量練習(xí)，直到完全適應(yīng)它即可。文章來源地址http://www.zghlxwxcb.cn/news/detail-825149.html
到了這里，關(guān)于Vue3學(xué)習(xí)(16) - 左側(cè)顯示分類菜單的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![微信小程序 - [完整源碼] 全屏左右菜單聯(lián)動(dòng)效果，左側(cè)分類與右側(cè)內(nèi)容聯(lián)動(dòng)，類似美團(tuán)餓了么的點(diǎn)餐頁面 “左邊菜單，右邊內(nèi)容“ 效果（開箱即用的示例源碼，代碼干凈整潔且注釋詳細(xì)）](https://imgs.yssmx.com/Uploads/2024/02/485103-1.gif)
