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的数据源处理，将数据源这棵“树”构造成不含最后一级，只有其所有父级，依次需求得以实现。

若本文有帮助到阅读本文的同学，欢迎点赞、关注、收藏，互相学习交流