不知道你们有没有在项目中遇到特别复杂的数据,最近的项目就遇到过,其实说实话并不是数据有多复杂,主要是太多,因为很多数据的处理无非就是过滤,去重等等这几种方式
- 数据
const q = [
{
id: 1,
name: "李四1",
children: [
{ id: 1, name: "李四1" },
{ id: 2, name: "李四" },
{ id: 2, name: "李四" },
{ id: 1, name: "李四1" },
{ id: 5, name: "李四5" },
],
},
{
id: 2,
name: "李四",
children: [
{ id: 1, name: "李四1" },
{ id: 2, name: "李四" },
{ id: 2, name: "李四" },
{ id: 1, name: "李四1" },
{ id: 5, name: "李四5" },
],
},
{ id: 2, name: "李四" },
{ id: 1, name: "李四1" },
{ id: 5, name: "李四5" },
];
当让原先的数据肯定不是这个的,这些数据只是我在网上随便搜了个类似的,真实的数据比这复杂的很多,而且我拿到这个数据是要渲染成一棵树形控件的,类似下方这个
首先需要对数据过滤,因为树形控件有自己的字段对应的,所以我们需要对数据的字段转换。
因为不知道有多少层级,所以递归处理是一定的
// 过滤字段
const formatFormDataWrap = nodes => {
return nodes.map(item => {
let children = [];
let dis = true;
if (item.children && item.children.length > 0) {
dis = false;
children = formatFormDataWrap(item.children);
}
// 以下就是你真实要输出的字段,可自行调整
return {
biztype: item.bizType,
label: item.showName,
key: item.treePath,
disabled: dis ? item.must : dis,
children: children,
};
});
};
- 树形控件需要保证key值是唯一的,所以我们需要对数据进行去重处理
// 去重
const handleRepeat = nodes => {
var obj = {};
return nodes.reduce(function (item, next) {
if (next.children && next.children.length > 0) {
next.children = handleRepeat(next.children);
}
obj[next.key] ? "" : (obj[next.key] = true && item.push(next));
return item;
}, []);
};
其实对庞大复杂的数据处理只要自身对递归方法理解的稍微好点,都是比较简单的。