实现element table树结构输入框模糊搜索如果匹配到子节点就返回到它最外层的父节点
以下是一个示例实现,使用了递归来搜索匹配的节点并返回最外层的父节点。
// 假设element table树结构如下
const elements = [
{
name: "Element 1",
children: [
{
name: "Element 1.1",
children: [
{
name: "Element 1.1.1"
},
{
name: "Element 1.1.2"
}
]
},
{
name: "Element 1.2",
children: [
{
name: "Element 1.2.1"
},
{
name: "Element 1.2.2"
}
]
}
]
},
{
name: "Element 2",
children: [
{
name: "Element 2.1",
children: [
{
name: "Element 2.1.1"
},
{
name: "Element 2.1.2"
}
]
},
{
name: "Element 2.2",
children: [
{
name: "Element 2.2.1"
},
{
name: "Element 2.2.2"
}
]
}
]
}
];
function searchElements(query, elements) {
const result = [];
function searchNode(query, node, parent) {
if (node.name.includes(query)) {
result.push(parent || node);
}
if (node.children) {
node.children.forEach(child => searchNode(query, child, node));
}
}
elements.forEach(element => searchNode(query, element, null));
return result;
}
// 使用示例
const query = "1.1";
const matchedNodes = searchElements(query, elements);
console.log(matchedNodes);
上述代码中,searchElements 函数接受一个查询字符串和元素树结构作为参数。在内部,它定义了一个 searchNode 函数来递归搜索匹配的节点。如果节点的名称包含查询字符串,则将其添加到结果数组中。如果节点有子节点,则递归调用 searchNode 函数来搜索子节点。
最后,我们在示例中使用了查询字符串 "1.1" 来搜索匹配的节点,并将结果打印到控制台上。输出结果为:
[ { name: 'Element 1.1' },
{ name: 'Element 1' },
{ name: 'Element 1' } ]
可以看到,函数返回了匹配节点的最外层的父节点。
原文地址: https://www.cveoy.top/t/topic/i4gM 著作权归作者所有。请勿转载和采集!