最近突然遇到一个需求,就是我们在获取到树状结构数据的时候,假如 知道了 某一节点的id,那么怎么找到他对应的名称呢,又或者我们知道了 最后一个子节点的id,怎么知道他父级都有那些节点呢,他们对应的节点id又是什么呢,有一个经典的例子 就是 饿了么UI 里的 级联选择器 (el-cascader )例子:
const options = [
{
id: 'zhinan',
name: '指南',
children: [
{
id: 'shejiyuanze',
name: '设计原则',
children: [
{
id: 'yizhi',
name: '一致',
children:[
{
id:'yizhi1',
name: '一致1',
},
{
id:'yizhi2',
name: '一致2',
},
]
},
{
id: 'fankui',
name: '反馈'
}
]
},
{
id: 'daohang',
name: '导航',
children: [
{
id: 'cexiangdaohang',
name: '侧向导航'
},
{
id: 'dingbudaohang',
name: '顶部导航'
}
]
}
]
}
];
如上图 就是一个标准的树型结构数据,一个多维数组,一层套一层,一般数据后台都会写好给我们,而且id 肯定是不重复的,这样我们才能后续操作,现在,假如 我们只知道 id 是 'shejiyuanze',那么如何 找到对应的名称呢?下面就是一个递归方法,直接调用这个方法,把id和他的数据穿进去就行.
function findNameById(id, data) {
for (let i = 0; i < data.length; i++) {
if (data[i].id === id) {
return data[i].name; //名称
} else if (data[i].children) {
const result = findNameById(id, data[i].children);
if (result) {
return result;
}
}
}
return null;
}
//调用
findNameById('shejiyuanze',options)
这个解决完成后 突然还有个问题, 因为 用的级联选择器,当你要做数据回显的时候,有时候后台只给你一个 id,那怎么能找到对应的父级id集合呢,给他回显上去。下面又是一个递归方法:
//根据 最后一项的id 获取所有父级的id
function findParentIdsById(id, data, parentIds = []) {
for (let i = 0; i < data.length; i++) {
if (data[i].id === id) {
return parentIds;
} else if (data[i].children) {
const result = findParentIdsById(id, data[i].children, [...parentIds, data[i].id]);
if (result) {
return result;
}
}
}
return null;
}
//调用
findParentIdsById('yizhi1',options)
那么 把id 和源数据 传进去 就会得到 当前id 对应的父级节点的所有id,是一个数组集合。
注意:这个数组是不包含 你传进去的这个当前的id的,如果要做数据回显的话,切记把当前id 要push到 数组中。
这样 就会得到一个 el-cascader 对应的id 数组,把参数赋值回去,这个级联选择器就能回显了。
有不懂的可以评论留言。。。