ztree树结构的数据结构如下:

[ { "id": 3990, "name": "泡沫灭火", "iconShow": false, "children": [ { "id": 8616, "name": "泡沫发生器", "iconShow": false, "children": [ { "id": 8617, "name": "水轮机式泡沫发生器", "iconShow": false }, { "id": 8618, "name": "电动机式泡沫发生器", "iconShow": false } ] }, { "id": 8619, "name": "泡沫比例混合器", "iconShow": false, "children": [ { "id": 8620, "name": "压力储罐式泡沫比例混合器", "iconShow": false }, { "id": 8621, "name": "平衡压力式比例混合器", "iconShow": false }, { "id": 8622, "name": "环泵式负压比例混合器", "iconShow": false }, { "id": 8623, "name": "管线式负压比例混合器", "iconShow": false } ] } ] }, { "id": 3946, "name": "沙发", "iconShow": false } ]





过滤后要转换成的目标数据结构如下:

[ {
"disabled": false, "text": "泡沫灭火,泡沫发生器,水轮机式泡沫发生器", "id": "3990,8616,8617" }, { "disabled": false, "text": "泡沫灭火,泡沫发生器,电动机式泡沫发生器", "id": "3990,8616,8618" }, { "disabled": false, "text": "泡沫灭火,泡沫比例混合器,压力储罐式泡沫比例混合器", "id": "3990,8619,8620" }, { "disabled": false, "text": "泡沫灭火,泡沫比例混合器,平衡压力式比例混合器", "id": "3990,8619,8621" }, { "disabled": false, "text": "泡沫灭火,泡沫比例混合器,环泵式负压比例混合器", "id": "3990,8619,8622" }, { "disabled": false, "text": "泡沫灭火,泡沫比例混合器,管线式负压比例混合器", "id": "3990,8619,8623" } ]

下面是实现方法:

tree_to_list(ztree, result, temp_ids =[],temp_names =[]){
      ztree.forEach(node=>{
        if(node.children){
          this.tree_to_list(node.children,result, temp_ids.concat([node.id]), temp_names.concat([node.name]))
        }else{
          result.push({disabled:false,text:temp_names.concat([node.name]).join(','),id:temp_ids.concat([node.id]).join(',')})
        }
      })
    },

调用如下:

const result = [] 
tree_to_list(zTree, result)
 const filter_arr = result.filter(item=>{return item.text.indexOf(this.searchValue) > -1})
console.log(filter_arr)
zTree为树结构数据,filter_arr为二维数组。
posted on 2023-11-17 17:16  沐熙叶语  阅读(92)  评论(0编辑  收藏  举报