递归
<style type="text/css"> [v-cloak]{display: none;} body { margin: 0; padding: 0; } #app { width: 400px; margin: 0 20px; text-align: left; } </style> <div id="app" v-cloak> <input type="text" v-model="gg" @input="input"> <div v-for="(item,index) in list" :key="index"> {{item.Item_Code}}-{{item.Item_Name}} <div v-for="(item2,index2) in item.ChildList" :key="index2" style="padding-left: 50px;"> {{item2.Item_Code}}-{{item2.Item_Name}} <div v-for="(item3,index3) in item2.ChildList" :key="index3" style="padding-left: 50px;"> {{item3.Item_Code}}-{{item3.Item_Name}} </div> </div> </div> </div>
let vm = new Vue({ el: '#app', data: { gg: '', list: [], oldList: [], }, created() { this.getData(); }, methods: { factorial(ary,str){ for(var k=0; k<ary.length; k++){ var cur = ary[k].Item_Code; var wzcur = ary[k].Item_Name; var curChild = ary[k].ChildList; if(curChild != undefined && curChild.length != 0){ //这里使用递归 this.factorial(curChild,str) if(curChild.length == 0 && cur.indexOf(str) == -1 && wzcur.indexOf(str) == -1){ ary.splice(k, 1) k--; } }else { if (cur.indexOf(str) == -1 && wzcur.indexOf(str) == -1) { //如果不匹配 ary.splice(k, 1) k--; } } } }, input(e) { // 拿值去匹配,匹配不上的删除,删除时判断必须为末端,例如3级有匹配,2级的匹配不上,但不能删除,3级兄弟的匹配不上可以删除, // 2级符合删除的条件为:匹配不上并且为末端,当3级全部删除完2级为空数组时可以删,判断length // 2级删除要等3级循环完,判断是否为空了 let str = e.target.value; let ary = deepClone(this.oldList); this.factorial(ary,str); // for(let i_1=0;i_1<ary.length;i_1++){ // let cur1 = ary[i_1].Item_Code; // let wzcur1 = ary[i_1].Item_Name; // //得到当前项的子集,2级 // let cur1Child = ary[i_1].ChildList; // //如果2级存在,遍历2级 // if (cur1Child.length != 0) { // // for(let i_2=0; i_2<cur1Child.length; i_2++){ // let cur2 = cur1Child[i_2].Item_Code; // let wzcur2 = cur1Child[i_2].Item_Name; // // //得到当前项的子集,3级 // let cur2Child = cur1Child[i_2].ChildList; // //如果3级存在,遍历3级 // if (cur2Child.length != 0) { // // for(let i_3=0;i_3<cur2Child.length;i_3++){ // let cur3 = cur2Child[i_3].Item_Code; // let wzcur3 = cur2Child[i_3].Item_Name; // // //这里取得子集加循环,判断也要加为空判断 // if (cur3.indexOf(str) != -1 || wzcur3.indexOf(str) != -1) { // //如果匹配 // } else { // //如果不能匹配删除自己 // //因为3级是末端,可以直接删除 // cur2Child.splice(i_3, 1) // i_3--; // } // } // // if(cur2Child.length == 0 && cur2.indexOf(str) == -1 && wzcur2.indexOf(str) == -1){ // //如果子集都被删除并且父级不能匹配,就不删 // cur1Child.splice(i_2, 1) // i_2--; // } // // } else { // //如果3级不存在 // if (cur2.indexOf(str) != -1 || wzcur2.indexOf(str) != -1) { // //如果匹配 // } else { // cur1Child.splice(i_2, 1) // i_2--; // } // } // } // // if(cur1Child.length == 0 && cur1.indexOf(str) == -1 && wzcur1.indexOf(str) == -1){ // ary.splice(i_1, 1) // i_1--; // } // // } else { // //如果2级不存在 // if (cur1.indexOf(str) != -1 || wzcur1.indexOf(str) != -1) { // //如果匹配 // } else { // ary.splice(i_1, 1) // i_1--; // } // } // } this.list = ary; //console.log(this.list) }, getData() { let ary1 = [ { ChildList: [ { ChildList: [ { Item_Code: "111", Item_ID: 111, Item_Name: "库存现金", }, { Item_Code: "1125", Item_ID: 1125, Item_Name: "银行存款", }, { Item_Code: "113", Item_ID: 113, Item_Name: "存放中央银行款项", } ], Item_Code: "11", Item_ID: 11, Item_Name: "存放同业", }, { ChildList: [ { Item_Code: "634", Item_ID: 634, Item_Name: "其它货币基金", }, { Item_Code: "6353", Item_ID: 63453, Item_Name: "结算备付金", }, { Item_Code: "636", Item_ID: 636, Item_Name: "存出保证金", } ], Item_Code: "44", Item_ID: 44, Item_Name: "拆出资金", }, { ChildList: [ { Item_Code: "777", Item_ID: 777, Item_Name: "交易性金融资产", }, { Item_Code: "77456", Item_ID: 77456, Item_Name: "买入返售金融资产", }, { Item_Code: "779", Item_ID: 779, Item_Name: "应收票据", } ], Item_Code: "77", Item_ID: 77, Item_Name: "应收帐款", } ], Item_Code: "147", Item_ID: 147, Item_Name: "预付帐款", }, { ChildList: [ { ChildList: [ { Item_Code: "999", Item_ID: 999, Item_Name: "应收股利", }, { Item_Code: "998", Item_ID: 998, Item_Name: "应收利息", }, { Item_Code: "997", Item_ID: 997, Item_Name: "应收保护储金", } ], Item_Code: "99", Item_ID: 99, Item_Name: "应收代位追偿款", }, { ChildList: [ { Item_Code: "666", Item_ID: 666, Item_Name: "应收分保帐款", }, { Item_Code: "665", Item_ID: 665, Item_Name: "其它应收款", }, { Item_Code: "664", Item_ID: 664, Item_Name: "坏帐准备", } ], Item_Code: "66", Item_ID: 66, Item_Name: "贴现资产", }, { ChildList: [ { Item_Code: "333", Item_ID: 333, Item_Name: "贷款", }, { Item_Code: "332", Item_ID: 332, Item_Name: "贷款损失准备", }, { Item_Code: "331", Item_ID: 331, Item_Name: "代理兑付证券", } ], Item_Code: "33", Item_ID: 33, Item_Name: "材料采购", } ], Item_Code: "963", Item_ID: 963, Item_Name: "在途物资", }, { ChildList: [ { ChildList: [ { Item_Code: "336699", Item_ID: 336699, Item_Name: "原材料", }, { Item_Code: "225588", Item_ID: 225588, Item_Name: "库存商品", }, { Item_Code: "114477", Item_ID: 114477, Item_Name: "发出商品", } ], Item_Code: "123", Item_ID: 123, Item_Name: "周转材料", }, { ChildList: [ { Item_Code: "115599", Item_ID: 115599, Item_Name: "贵金属", }, { Item_Code: "335577", Item_ID: 335577, Item_Name: "抵债资产", }, { Item_Code: "446655", Item_ID: 446655, Item_Name: "损余物资", } ], Item_Code: "456", Item_ID: 456, Item_Name: "待摊费用", }, { ChildList: [ { Item_Code: "786", Item_ID: 786, Item_Name: "独立帐户资产", }, { Item_Code: "453", Item_ID: 453, Item_Name: "长期应收款", }, { Item_Code: "168", Item_ID: 168, Item_Name: "固定资产", } ], Item_Code: "555", Item_ID: 555, Item_Name: "累计折旧", } ], Item_Code: "226", Item_ID: 226, Item_Name: "在建工程", }, ]; this.list = ary1; this.oldList = ary1; }, } }) //数组深度克隆 function (obj) { let newObj = Array.isArray(obj) ? [] : {} if (obj && typeof obj === "object") { for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = (obj && typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key]; } } } return newObj }