Vue3學習（十五）之 級聯選擇組件Cascader的使用

寫在前面

好像又過去了一周，依舊是什么也沒產出，不是懶，而是心情不好，什么也不想干，失眠是常事。

應該是從今年開始，突然感覺博客園就像是我自己的日記一樣，承載着自己的喜怒哀樂和酸甜苦辣咸，當然，尷尬的就是沒有秘密了，肯定會被熟人看到，看到也無妨，如果覺得我靠譜，請幫幫我，謝謝！

為什么心情壞到了極點？

本定大上周相親，相親對象是個高中畢業的女孩，月入3000，至於干什么沒記住。

從聽說有人給介紹對象，家長就給我做了近一周的思想工作，說自己也不小了，別太挑了，差不多的得了之類的，迫於歲數大的壓力，我妥協了。

介紹人先跟我父母要了我照片，我們雙方互換了下照片，我一看女孩長得還算不錯，也挺白，163的身高，再結合父母的思想工作， 便答應可以相親。

結果，女孩看完我照片說不行，想找像王嘉爾那樣的，我差點沒氣出一口老血，沒想到會被一個高中生挑三揀四的，我真的有那么差？

我開始懷疑自己，接着就是一周的emo時刻了....

級聯選擇組件Cascader的使用

有時候還是需要對自己狠一點，要不真的是拖延症呀，主要是代碼這東西扔的時間越長越生疏，還是那份危機感在起作用，我還是想決定逼自己一下下，接着學習。

table表格渲染處理

示例代碼如下：

  <template v-slot:category="{ text, record }">
    <span>{{ getCategoryName(record.category1Id) }} / {{ getCategoryName(record.category2Id) }}</span>
  </template>
  //將分類1和分類2合並，此處都改成分類處理
   {
      title: '分類',
      slots: { customRender: 'category' }
    },
   //編輯、保存微調
    const categoryIds = ref();
    const ebooks_data = ref();
    const modalVisible = ref<boolean>(false);
    const modalLoading = ref<boolean>(false);
    /**
     * 編輯/保存
     */
    const handleModalOk = () => {
      modalLoading.value = true;
      ebooks_data.value.category1Id = categoryIds.value[0];
      ebooks_data.value.category2Id = categoryIds.value[1];
      axios.post("/ebook/save", ebooks_data.value).then(response => {
        const data = response.data;
        if (data.success) {
          modalVisible.value = false;
          modalLoading.value = false;
          //重新加載列表
          handleQuery({
            page: 1,
            size: pagination.value.pageSize,
          });
        } else {
          message.error(data.message);
        }
      })

    };

數據處理

示例代碼如下：

    const level1 =  ref();
    let categorys: any;
    /**
     * 查詢所有分類
     **/
    const handleQueryCategory = () => {
      loading.value = true;
      axios.get("/category/all").then((response) => {
        loading.value = false;
        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);

          // 加載完分類后，再加載電子書，否則如果分類樹加載很慢，則電子書渲染會報錯
          handleQuery({
            page: 1,
            size: pagination.value.pageSize,
          });
        } else {
          message.error(data.message);
        }
      });
    };

 const getCategoryName = (cid: number) => {
      // console.log(cid)
      let result = "";
      categorys.forEach((item: any) => {
        if (item.id === cid) {
          // return item.name; // 注意，這里直接return不起作用
          result = item.name;
        }
      });
      return result;
    };

    onMounted(() => {
      handleQueryCategory();
    });

   return{
     getCategoryName,
      categoryIds,
      level1

  }

效果

知識點

• 對a-table某一列有自定義的顯示方式，可以定義一個template，添加一種渲染效果
• 在setup里面可以定義普通的變量，不需要所有的變量都是響應式變量
• 第三方組件會提供內置的變量參數，如果不知道是什么值，可以打印到界面或日志看看。

寫在最后

輸了什么別輸了心情，心一亂了方寸，便滿盤皆輸，做好一個情緒穩定的成年人，洗洗睡了，今天吐槽完畢，代碼部分有點混亂，有時間還是得捋一捋。