vue+antd中根据title,对比树形数组对象,找出与title相应的树形数组对像,并把相同的返回
时间: 2024-09-11 15:07:30 浏览: 55
在使用Vue结合Ant Design Vue(antd-vue)组件库开发时,如果你有一个树形数据结构,并希望根据某个`title`字段来找出与之匹配的树节点,你可以通过递归遍历树形数组的方式来实现。以下是一个简单的示例方法,用于实现这一功能:
```javascript
/**
* 根据title查找树形数组中的对象
* @param {Array} treeData - 树形数组数据
* @param {String} title - 需要匹配的标题
* @returns {Object} 找到的对象,如果未找到则返回null
*/
function findTreeObjectByTitle(treeData, title) {
let foundObject = null;
function traverse(data) {
data.forEach(node => {
if (node.title === title) {
foundObject = node;
} else if (node.children && node.children.length > 0) {
const result = traverse(node.children);
if (result) {
foundObject = result;
}
}
});
}
traverse(treeData);
return foundObject;
}
```
这个方法中,`traverse`函数是一个内部递归函数,用于遍历树形数组。它检查每个节点的`title`属性是否与给定的`title`相匹配。如果找到匹配的节点,就将其赋值给`foundObject`变量,并停止进一步搜索。如果在当前节点的子节点中找到匹配项,也会将其赋值给`foundObject`。
你可以按照以下方式调用这个函数:
```javascript
const treeData = [
{
title: 'Node1',
key: '0-0',
children: [
{ title: 'Child Node1', key: '0-0-0' },
{ title: 'Child Node2', key: '0-0-1' },
],
},
// ... 其他节点
];
const targetTitle = 'Child Node1';
const foundNode = findTreeObjectByTitle(treeData, targetTitle);
console.log(foundNode); // 输出找到的对象,如果未找到则为null
```
阅读全文