寫在前面 和大家不太一樣,我覺得今年的自己更加relax,沒有親戚要走,沒有朋友相聚,也沒有很好的哥們要去敘舊,更沒有無知的相親,甚至可以這麼說沒有那些閑得慌的鄰居。 也可以說是從今天開始,算是可以進入自己的小世界,做自己想做的事,看看書,學習一下。 生活的精髓在於善待自己,用心感受每一刻的歡愉與寧 ...
寫在前面
和大家不太一樣,我覺得今年的自己更加relax,沒有親戚要走,沒有朋友相聚,也沒有很好的哥們要去敘舊,更沒有無知的相親,甚至可以這麼說沒有那些閑得慌的鄰居。
也可以說是從今天開始,算是可以進入自己的小世界,做自己想做的事,看看書,學習一下。
生活的精髓在於善待自己,用心感受每一刻的歡愉與寧靜!
人生於世上有幾個知己,多少友誼能長存,願友誼常青!
菜單顯示分類名
那麼如何讓菜單正常顯示菜單內容呢?
1、任務拆解
- 在頁面載入就查出所有分類
- 通過垂直菜單遍歷出所有分類內容並顯示
2、在頁面載入就查出所有分類
即在onMounted種通過handleQueryCategory,此處可以復用分類列表中的代碼,示例代碼如下:
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("原始數組:", categorys);
level1.value = [];
level1.value = Tool.array2Tree(categorys, 0);
console.log("樹形結構:", level1.value);
} else {
message.error(data.message);
}
});
};
onMounted(() => {
handleQueryCategory();
}
3、通過垂直菜單遍歷出所有分類內容並顯示
這塊還是考察的是v -for迴圈遍歷的知識點,示例代碼如下:
<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、效果
寫在最後
這部分的代碼,是純前端了, 代碼扔太久了,只能看懂,但是自己寫還是寫不出來,我想這種狀態,可能是很多新手,都會面臨的問題吧。
有沒有好的解決辦法呢?
沒有,在成功這條路上,永遠是沒有捷徑可言的。
如不適應,去練習,大量練習,直到完全適應它即可。
優秀不夠,你是否無可替代
軟體測試交流QQ群:721256703,期待你的加入!!
歡迎關註我的微信公眾號:軟體測試君
![](https://www.cnblogs.com/images/cnblogs_com/longronglang/1061549/o_QQ%E6%88%AA%E5%9B%BE20190728134401.jpg)