elementui 级联选择器（处理后台返回的数据格式）

 <el-cascader

          v-model="value"

          :options="options"

          @change="handleChange">

          </el-cascader>

难点：作为一名前端新人，主要是做数据处理
当后台给的数据与示例的数据格式不一致时，需要作出数据处理（使用数组的map方法）
例如：后台返回的数据是这样的，那么我们怎么把他们变成elementui上的格式内容呢

options：[
  {
    "id": 3,
    "name": "美的电饭煲",
    "code": "C",
    "ammeterDeviceStateList": [
      {
        "id": 247,
        "deviceId": 3,
        "power": "820",
        "state": "快速饭"
      }，
      {
        "id": 252,
        "deviceId": 3,
        "power": "30",
        "state": "杂粮粥"
      }]
  },
  {
    "id": 6,
    "name": "尚为台灯",
    "code": "F",
    "ammeterDeviceStateList": [
      {
        "id": 190,
        "deviceId": 6,
        "power": "8",
        "state": "三档"
      },
      {
        "id": 191,
        "deviceId": 6,
        "power": "4",
        "state": "二档"
      },
      {
        "id": 192,
        "deviceId": 6,
        "power": "1",
        "state": "一档"
      }
    ]
  }]

这里就需要用到map方法了，让我们来复习一下map方法的定义

*map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

*map() 方法按照原始数组元素顺序依次处理元素。

*注意： map() 不会对空数组进行检测。

*注意： map() 不会改变原始数组。

下面我们来做数据处理，这里的res.data为后台返回的原始数组，this.options为原始数组处理后的值，ammeterDeviceStateList.map为子菜单的原始数组，children为子菜单原始数组处理后的值。

 queryAmmeterType().then((res) => {
 this.options = res.data.map(({ name, id, ammeterDeviceStateList }) => ({
        value: id,
        label: name,
        children: ammeterDeviceStateList.map(({ state, id }) => ({
          value: id,
          label: state,
        })),
      }));

}

这样，就可以得到我们想要的，和elementui上一样的数据格式啦！！！