关于el-cascader赋值问题

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

本来写的是两个表单通过监听来实现联动，但是后面想想还是使用element UI组件里面的el-cascader，这样我就可以少些一点了，但是吧有时候想的比做的简单，在数据的赋值出现了问题，后端传来的数据是这样的，我想着把数据直接给处理赋值。

然后我在data里面是这样的声明的，之后调用接口将上图的数据赋值给它

代码是这样的：

数据赋值完之后我发现一个问题，我打印出来的值是这样的

但是实际的分类只是显示了通用系列

后面发现是处理数据的问题，我真的好傻啊，itemB.children都没定义，正确的写法应该如下图

 let newArr=[]
 this.allDevices.forEach(item=>{
   et object={
        label:item.name,
        value:item.name,
        children:[]
        }
   item.device_types.map(itemB=>{
   object.children.push({
       label:itemB.name,
       value:itemB.id,
       })
   })
  newArr.push(object)
  })
  this.options=newArr

只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。

看了文档之后当然还有方法二：就是options来接受后端的传递过来的数组，然后再props这个里面写上对应的label（指定选项标签为选项对象的某个属性值），value（指定选项的值为选项对象的某个属性值），children（指定选项的子选项为选项对象的某个属性值）等键值对

<el-cascader
   v-model="formInline.type_id"
   placeholder="请选择设备类型"
   :options="allDevices"
   clearable
   :props="{
   'label': 'name',
   'value': 'id',
   'children': 'device_types',
    }"
    filterable
    style="width: 180px"
    @focus="getAllDevices"
    @change="changeVal"
     >
    </el-cascader>