1、業務背景

業務需要做一個父級查詢，父級查詢的級聯組件不顯示最后一級，其他層級均顯示

2、解決辦法

1、頁面設計見上文

TypeError: Cannot read properties of null (reading ‘level‘)

2、代碼實現

// 獲取父子層級列表
 async parentSelected  (val) {
   this.loading = true
   try {
     const data = await GetXXXList({
       XXX: val,
     })
     const tree = []
     const childrenOf = {}
     ++this.isChangeSelectKeyNum
     data.forEach((item) => {
       const newItem = { ...item }
       const { PId } = newItem
       childrenOf[newItem.Id] = childrenOf[newItem.Id] || []
       newItem.children = childrenOf[newItem.Id]
       if (PId) {
         childrenOf[PId] = childrenOf[PId] || []
         if (newItem.children.length > 0) {
           childrenOf[PId].push({ value: newItem.Id, label: newItem.Name, children: newItem.children })
         } else {
           childrenOf[PId].push({ value: newItem.Id, label: newItem.Name })
         }
       } else {
         tree.push({ value: newItem.Id, label: newItem.Name, children: newItem.children })
       }
     })
     this.options = tree
   } catch (error) {
     this.options = []
   }
   this.loading = false
 },

通過對options的數據源處理，將數據源這棵“樹”構造成不含最后一級，只有其所有父級，依次需求得以實現。

若本文有幫助到閱讀本文的同學，歡迎點贊、關注、收藏，互相學習交流