利用递归遍历出数组对象中的children的值在Cascader 级联选择器中显示

 直接上代码

element-ui所要求的数据格式：
 options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
             }]
           }]
          }]
而后端给的是以下格式，并且带了空 children
 options: [{
          id: 'zhinan',
          value: '指南',
          children: [{
            id: 'shejiyuanze',
            value: '设计原则',
            children: [{
              id: 'yizhi',
              value: '一致',
              children:[]
             }]
           }]
          }]

解决方法：

在 handleChange 中能获取到所选择到的 那个value

// 这里拿到的 selectedOptions 就是一级一级选到的 value, 取最后一个传给后端
handleChange (value) {
      for (let i = 0; i < this.selectedOptions.length; i++) {
        this.data = this.selectedOptions[this.selectedOptions.length - 1]
      }
}

// 递归后端的数据，添加value属性和label属性
    addLabel (arr) {
      for (let k in arr) {
        arr[k].label = arr[k].value
        arr[k].value = arr[k].id
        if (arr[k].children.length < 1) {
          // 当后台返回的children为空时,页面会留空白，把空白部分去掉
          arr[k].children = undefined
        } else {
          this.addLabel(arr[k].children)
        }
      }
    }

参考：https://blog.csdn.net/suprezheng/article/details/86586902