1、业务背景
业务需要做一个父级查询,父级查询的级联组件不显示最后一级,其他层级均显示
2、解决办法
1、页面设计见上文
TypeError: Cannot read properties of null (reading ‘level‘)
2、代码实现
代码语言:javascript复制// 获取父子层级列表
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的数据源处理,将数据源这棵“树”构造成不含最后一级,只有其所有父级,依次需求得以实现。