一个项目需求中,需要判断数组中的对象是否有值,先看下数据结构:
data(){
return {
list = [
{
value: "1",
children: [
{
value: "2"
},
{
value: "3",
children: [
{
value: "4"
}
]
}
]
},
{
value: "5",
children: [
{
value: "6",
children: [
{
value: "7"
}
]
}
]
}
];
}
}
那么如何进行判断多层子集是否有值呢?这里就会用到递归来实现
若使用vue搭建的工程项目
我们可以现在methods中封装一个递归的方法
//递归判断项目中存在对象
ruleValidate(data) {
let flag = true;
function judgeChildren(data) {
data.forEach(e => {
if (!flag) {
return;
}
if (e.value) {
e.prop = e.value; //给对象增加自定义的key , 很多情况下都会使用到自定义的key
e.lable = e.value;
}
if (!e.value) {
flag = false;
return;
} else if (e.children && e.children.length) {
e.children.prop= e.value; //给对象增加自定义的key,很多情况下都会使用到自定义的key
e.children.lable = e.value;
judgeChildren(e.children);
}
});
}
judgeChildren(data);
return data;
},
在created这个声明周期中,直接对数据进行处理
this.dataObj = this.ruleValidate(this.list);
console.log(this.dataObj);
打印就可以看到 每个自定义的key值了,想要什么类型的数据,直接在封装的方法进行修改就ok了