前端拿到后台接口返回的数据，并根据实际情况按需处理数据

方法一：通过数据数组的map方法

//创建一个假数据，用于模拟后台返回的多级数据 
let options=[
        {id:1,name:'水果',children:[
            {id:11,name:'榴莲',prices:55},
            {id:12,name:'苹果',prices:45},
            {id:13,name:'香蕉',prices:35},
        ]},
        {id:2,name:'生活用品',children:[
            {id:21,name:'牙刷',prices:6},
            {id:22,name:'枕头',prices:5},
            {id:23,name:'中中',prices:5}
        ]}
    ]
//创建一个公共的方法，用于数据处理
function handelData(arr){
    //处理第一层数据(key与lable代表处理后的字段名称)
     return arr.map(item=>({
         key:item.id,
         label:item.name,
    //处理第二层数据
         children:item.children.map(ite=>(JSON.parse({
              key:ite.id,
              lable:ite.name,
          })))
     }))
 }

//调用方法处理数据
let newData = handelData(options)

注意：如果还有更多级数据，可以依次接着往下处理

方法二：通过递归的方法（这是引用借鉴网上大神的）

 let options=[
        {id:1,name:'水果',children:[
            {id:11,name:'榴莲',prices:55},
            {id:12,name:'苹果',prices:45},
            {id:13,name:'香蕉',prices:35},
        ]},
        {id:2,name:'生活用品',children:[
            {id:21,name:'牙刷',prices:6},
            {id:22,name:'枕头',prices:5},
            {id:23,name:'中中',prices:5}
        ]}
    ]  
let newarr = [] //这个数组用于接收处理过后的数据
//封装函数方便调用
  function handleData(data, newarr) {
    const len = data.length
    for (let i = 0; i < len; i++) {
        //如果子级存在,并且有数据
      if (data[i].children && data[i].children.length > 0) {
          //label为级联选择器要展示的值,我这里使用的是name,value为选中的值,我这里使用的是id,根据个人使用场景,按需调试
        newarr.push({ id: data[i].id, label: data[i].name, children: [] })
        this.handleData(data[i].children, newarr[i].children)
      } else {
          //子级不存在时,不用push  children:[],否则级联选择器最后一页会出现空白,很难看
        newarr.push({ id: data[i].id, label: data[i].name })
      }
    }
    return newarr
  }
//调用处理函数，得到自己处理后的数据
let dealArr = handleData(options,newarr)

注意：方法类似于方法一，看自己兴趣爱好选择

（一般可用于处理表单的级联数据）