一个项目需求中,需要判断数组中的对象是否有值,先看下数据结构:
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了