elementui中el-cascader遇到的问题

前端拿到数据后渲染出现的暂无数据，联动数据二级三级四级都有，如果一层一层循环判断删除的话会很麻烦，思路就是在拿到数据后进行map遍历并返回
html结构

          <el-cascader
            ref="cascader"
            v-model="params.data.address"
            :options="options"
            :props="{ value: 'id',label: 'name',children: 'childList'}"
            clearable
            @change="handleChange"
          />

同样的上方props也是根据后端返回的字段来修改。

 this.options = res.data  //这里已经赋值了，可以展示上方图例
 //下面是解决这个问题出现的代码
 this.options.forEach(item => {
        item.childList = item.childList.map(item => {
          return {
            id: item.id,
            name: item.name
          }
        })
      })

后端返回的数据结构是这样的

上方代码的childrenList可以根据后端返回的字段来修改

若需要拿到省市区及辖县就得遍历了如图效果

代码如下所示：

    async getSelectList() {
      const res = await orgManageApi.fetchSelectData({ address: '' })
      function getTreeData(data) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].childList.length < 1) {
            //  如果子节点为空数组 则设置为undefined
            data[i].childList = undefined
          } else {
            // 如果子节点不为空数组 则递归调用
            getTreeData(data[i].childList)
          }
        }
      }
      getTreeData(res.data)
      this.options = res.data
    },