js学习记录之javaScript 递归生成树形(tree)结构

本篇文章起源于在使用element级联选择器（¶Cascader ）时，需要的数据格式需要由普通数组数据递归重组为树形结构数组，参考了一个博主的文章：javaScript 递归生成树形(tree)结构_js递归生成树形结构_ssschema的博客-CSDN博客

怕博主后期文章消失，所以自己再写一遍：

 1.在body中引入级联选择器样式

<el-form-item label="所属区域:" prop="areaCode">
      <el-cascader v-model="loginForm.areaCode" :options="areaCodeOptions"
        :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
</el-form-item>

2.在data中定义数组

data() {
      return {
        areaCodeOptions: [],
    }
}

        注意：级联选择器所需原始数据格式为

const temp = [
        {
          'value': 1,
          'label': '云南',
          'parentId': 0
        },
        {
          'value': 2,
          'label': '昆明',
          'parentId': 1
        },
        {
          'value': 6,
          'label': '五华区',
          'parentId': 2
        }
]

        递归后生成的数据格式：

 result: [{
          value: '1',
          label: '云南',
          children: [{
            value: '1',
            label: '昆明',
            children: [{
              value: '6',
              label: '五华区'
            }
           ]
    }
]

3.递归方法

 // 开始递归方法
      generateOptions(params) {
        var result = []
        for (const param of params) {
          if (param.parentId ==0 ) { // 判断是否为顶层节点
            var parent = {
              'value': param.value,
              'label': param.label
            }
            parent.children = this.getchilds(param.value, params) // 获取子节点
            result.push(parent)
          }
        }
        return result
      },

      getchilds(value, array) {
        const childs = []
        for (const arr of array) { // 循环获取子节点
          if (arr.parentId === value) {
            childs.push({
              'value': arr.value,
              'label': arr.label
            })
          }
        }
        for (const child of childs) { // 获取子节点的子节点
          const childscopy = this.getchilds(child.value, array) // 递归获取子节点
          if (childscopy.length > 0) {
            child.children = childscopy
          }
        }
        return childs
      },

4.在调用接口获取原始数据的地方，调用递归方法

// 传入原始数据newArry
var result = this.generateOptions(newArry)
//将处理后的数据，赋值给级联选择器
this.areaCodeOptions=result