Vue3學習(16) - 左側顯示分類菜單

寫在前面

和大家不太一樣，我覺得今年的自己更加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、效果

寫在最後

這部分的代碼，是純前端了， 代碼扔太久了，只能看懂，但是自己寫還是寫不出來，我想這種狀態，可能是很多新手，都會面臨的問題吧。

有沒有好的解決辦法呢？

沒有，在成功這條路上，永遠是沒有捷徑可言的。

如不適應，去練習，大量練習，直到完全適應它即可。