VUE+树状图数据格式 递归遍历获取参数

targetd( ) 根据ID找到数据中的url

childrenFilter( )使用递归改变原数组结构

<template>
	<div @click="recursion(id,list)"></div>
</template>

data(){
	return{
			id:3.1, // 树状图中需要找到的ID
			list:[
			{id:1,url:"a",children:[id:2,url:"a",children:[]]},
			{id:2,url:"b",},
			{id:3,url:"c",children:[id:3.1,url:"c.c",children:[]]},
			],// 数据格式
	     	targetUrl:"";// 找到的路径
	}
},
methods:{

	// 递归获取路径 参数1:需要找到的id 参数2:数组(树状图格式)
	//opid:3.1
    targetd(opid, list) {
    // 结束条件
      if (list && list.length > 0) {
      // 循环遍历
        for (let i = 0; i < list.length; i++) {
        //结束递归
          if (list[i].id === opid) {
            this.targetUrl = list[i].url;  // c.c
            return;
          } else {
          // 如果数组中有children则继续递归
            if (list[i].children) {
              this.targetd(opid, list[i].children);
            }
          }
        }
      }
    },
// 动态改变树状图结构 将ID为2的URL改变为URL (改变原数组结构)
    childrenFilter(list) {
      if (list && list.length > 0) {
        for (let k in list) {
          if (list[k].children != null && list[k].children != []) {
            list[k].children = this.childrenFilter(list[k].children);
          }
        }
        // 这里用map,forEach都行 用filter是因为这里还可以做过滤处理
        list = list.filter(o => {
        	if(o.id=="2")o.url="url"
			return true
        });
        return list;
      }
    },/*   [
			{id:1,url:"a",children:[id:2,url:"URL",children:[]]},
			{id:2,url:"URL",},
			{id:3,url:"c",children:[id:3.1,url:"c.c",children:[]]},
			],// 数据格式
		*/
}