图片展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let newArray = [{
id: 1,
name: '张三1',
// key: 2,
children: [
{
id: 2,
name: '李四',
key: 2,
children: [
{
id: 5,
name: '李四5',
key: 2,
}
]
},
]
}, {
id: 3,
name: '张三2',
key: 0,
children: [
{
id: 4,
name: '李四',
key: 2,
children: [
{
id: 5,
key: 1,
name: '王五'
}
]
},
{
id: 5,
name: '李四2',
key: 22,
children: [
{
id: 5,
key: 1,
name: '王五'
}
]
}
]
}]
const keys1 = [0]
function filterTreeData (arr, values, field = 'key') {
// 随机数
function randomId () {
const randomId = Math.random().toString(36).substring(2, 10);
return randomId;
}
return arr.reduce((pre, cur) => {
// 添加唯一标识符
const newCur = { ...cur, $id: randomId() };
const result = [...pre, { ...newCur }].map(item => {
return {
...item,
$id: item.$id ? item.$id : randomId(),
}
}).filter(item => {
// 当没有key值时，返回true
return item?.key === undefined ? true : values.includes(item?.key)
});
const flag = result.findIndex(item => {
return item.$id === newCur.$id
})
// 去除唯一标识符
result.forEach(item => {
delete item.$id
})
// 递归操作
if (flag !== -1) {
result[flag].children = filterTreeData(result[flag]?.children || [], values, field)
}
return result;
}, []);
}
console.log(filterTreeData(newArray, keys1))
</script>
</body>
</html>