关于四级联动(省市区街道) ---- 使用递归函数渲染树形element-plus

一般情况下后端返回的数据是三级联动或者是四级联动

在返回的数据中，一般children中有一个字段与父级中的一个是相等的，这个字段将会是我们在使用递归函数是传入的一个重要参数

模拟的返回的数据：

list: [{
      id: '',
      code: '',
      ame: '',
      parentCode: '',
      childrenList: [{
        id: '',
        code: '',
        ame: '',
        parentCode: '',   //一般parentCode为上级的code
        childrenList: [{
          id: '',
          code: '',
          ame: '',
          parentCode: '',
          childrenList: [{
            id: '',
            code: '',
            ame: '',
            parentCode: '',
          }]
        }]
      }]
    },]

下面是递归函数,你可以把它封装起来引入

//基本逻辑，我们需要传入一个总的列表，和一个判断的条件（id）
//遍历这个列表，选择满足条件  parentCode === code

//基本逻辑，我们需要传入一个总的列表，和一个判断的条件（id）
//遍历这个列表，选择满足条件  parentCode===code
export function listToTreeData(list, id) {
//准备一个空的数组以便我们返回数据
  const res = []
  list.forEach(el => {
    if (el.parentCode === code) {
      // 如果当前列表的 parentCode 等于标准 code 就是找到了一个上级
      // 这个上级可能有自己下一级
      //再次递归
      el.childrenList = listToTreeData(list, el.id)
      //把符合条件的数据push到我们事先准备好的 res 中
      res.push(el)
    }
  })
  return res
}

封装完毕我们引入使用，传入条件即可 

一般情况下返回的数据并不是我们想要的，这里我用的了 element-plus 的tree树形组件，我们可以用默认的属性来改造数据

其中  defaultProps  的  chiildren和label 就是你需要的

你可以自己来改造

<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
</template>



const defaultProps = {
  children: 'childrenList',
  label: 'name',
}