vue获取到树形结构后递归遍历数据，生成树形结构数据，无限级_vue遍历树形数据

1.需求

做的是个三级联动的数据

options: [{
	  value: 1,
	  label: '东南',
	  children: [{
	      value: 2,
	      label: '上海',
	      children: [
	      { value: 3, label: '普陀' },
	      { value: 4, label: '黄埔' },
	      { value: 5, label: '徐汇' }
	      ]
	  }, {
	      value: 7,
	      label: '江苏',
	      children: [
	      { value: 8, label: '南京' },
	      { value: 9, label: '苏州' },
	      { value: 10, label: '无锡' }
	      ]
	  }, {
	      value: 12,
	      label: '浙江',
	      children: [
	      { value: 13, label: '杭州' },
	      { value: 14, label: '宁波' },
	      { value: 15, label: '嘉兴' }
	      ]
	  }]
	  }, {
	  value: 17,
	  label: '西北',
	  children: [{
	      value: 18,
	      label: '陕西',
	      children: [
	          { value: 19, label: '西安', 
	              children: [{
	                  value: 19,
	                  label: '陕西',
	                  children: [
	                  { value: 30, label: '西安' },
	                  { value: 40, label: '延安' }
	                  ]
	              }, {
	                  value: 41,
	                  label: '新疆维吾尔族自治区',
	                  children: [
	                  { value: 42, label: '乌鲁木齐' },
	                  { value: 43, label: '克拉玛依' }
	                  ]
	              }]
	          },
	          { value: 20, label: '延安' }
	      ]
	  }, {
	      value: 21,
	      label: '新疆维吾尔族自治区',
	      children: [
	          { value: 22, label: '乌鲁木齐' },
	          { value: 23, label: '克拉玛依' }
	      ]
	  }]
	}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

需要的是这种数据结构的，而且获取到的数据也是树形结构的，需要不停的往下循环，但是又不确定是几层，那么这样需要用到递归方法。

2.实现方法

三级联动，elementui官网中只能单选，多选是用不了的，所以只能用另一个插件来进行多选,先下载包

npm install ele-multi-cascader
1

在main.js中引入和使用

import elCascaderMulti from "el-cascader-multi";
Vue.use(elCascaderMulti);
1
2

需要页面template中代码

<el-collapse accordion>
   <el-collapse-item v-for="item in usersTree" :key="item.id">
     <template slot="title">
       标题啦<i class="header-icon el-icon-info"></i>
     </template>
     <el-cascader-multi v-model="checkList" :data="item.children" filterable> </el-cascader-multi>
   </el-collapse-item>
</el-collapse>
1
2
3
4
5
6
7
8

data中：

data () {
	return {
		usersTree: []
	}
}
1
2
3
4
5

methods中

methods {
	organizManage () {
      //  从后台获取树形机构数据
      this.axios.get('system/organizManage/tree').then(res => {
          if (res.code === '0') {
              this.usersTree = res.data
              this.usersTree.forEach(item => {
                  if (item.children.length > 0) {
                  	  // 即：this.digui(item);在这地方添加的
                      item.children.forEach(items => {
                          // 下面的就是执行递归的方法，因为我是从第二层才开始需要往下挖的，所以这里多了个forEach,如果从第一层起，从item就好了，即：this.digui(item);在上面添加
                          this.digui(items); // 这里是源头，把一个对象开始递归，开始循环
                          // 如果想看完整数据，那么是在这里打印数据哦
                          console.log(items, '看我查看完整的数据哦')
                          // 因为上一步递归时，就已经把循环children的动作做完了，这里是验收递归方法的地方。
                      })
                  } else {
                      // 如果第一层没有子项做的操作。。。。。
                  }
              })
          } else {
              this.$message.error(res.message);
          }
      });
  },
  digui (item) {
  	  // 一层一层往下面执行，循环，直到不满足情况的条件下，会自动跳出这个递归方法，然后又到上面方法的源头处，开始执行下一个对象。。。
      if (item.children.length > 0) {
          item.value = item.orgCode
          item.label = item.orgName
          // 因为三级联动的数据格式是value和label,所以需要自己手动添加，没有的忽略。
          item.children.forEach(ff => {
          	  // 这里就是判断他的children下面还有没有值，有的话我就要往下挖，就又开始自己调用自己了
              this.digui(ff)
          })
      }  else {
      	   // 这里就是判断，如果我这一层的children下面没有东西的时候该做什么操作 
          item.value = item.orgCode
          item.label = item.orgName // 要添加value和label,否则会看不到标签名字和值
          // --------------------------分割线---------------------------------
          // 下面部分是我的需求，如果他的chilren下面没有值，那么发送请求获取本层数据下有没有值，没有children就是空，有的话，就把值push进他的children。这里看自己需求
          let form = {
              orgCode: item.orgCode,
              orgName: item.orgName,
              pageNum: 1,
              pageSize: 100000,
              companyId: item.companyId
          }
          this.store.dispatch('system/usersManage/list', form).then(res => {
              if (res.code === '0') {
                  if (res.data.list.length > 0) {
                      for (var i = 0; i < res.data.list.length; i++) {
                          res.data.list[i].value = res.data.list[i].userId
                          res.data.list[i].label = res.data.list[i].userName
                          item.children.push(res.data.list[i])
                      }
                  }
              }
          });
      }
      // 到这里为止，不能在这里打印数据，不然数据就是个断层的，因为在这里打印的数据是当前循环的这一层的数据，如果想看完整数据效果，那么就需要在递归方法第一次调用的地方打印需要递归的值，即上一个方法中。
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

这样子一个递归方法基本就完成了。