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

久曲健發表於2022-02-28
Vue元件

寫在前面

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

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

為什麼心情壞到了極點？

本定大上週相親，相親物件是個高中畢業的女孩，月入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裡面可以定義普通的變數，不需要所有的變數都是響應式變數
  • 第三方元件會提供內建的變數引數，如果不知道是什麼值，可以列印到介面或日誌看看。

寫在最後

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

相關文章