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的数据源处理，将数据源这棵“树”构造成不含最后一级，只有其所有父级，依次需求得以实现。
若本文有帮助到阅读本文的同学，欢迎点赞、关注、收藏，互相学习交流