el-cascader 最后一级不显示出来

GoodTime

发布于 2024-03-05 16:20:32

1140

发布于 2024-03-05 16:20:32

文章被收录于专栏：GoodTime的全栈开发GoodTime的全栈开发

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