Element Cascader级联选择器的使用方式

Cascader级联选择器
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
直接上代码

//html
<el-cascader
      :props="defaultParams"
       :options="areaData"
        v-model="selectedOptions"
        change-on-select
        @change="handleChange">
 </el-cascader>

其中属性change-on-select用于任意一级菜单的选项的选择
js结构

export default {
   data(){
       return {
            areaData: [],
            selectedOptions: [],
            defaultParams: {
                label: 'areaName',//要显示元素的名称
               value: 'areaId'//显示元素对应的id
               children: 'childrens'//子集名称
           },
       }
    }
     methods:{
     handleChange(value) {
       console.log(value);
       this.cityId= value[1]//选中一级id
        this.proviceId=value[0]//选中二级id
     },
}
}

以上是我工作中一些功能总结和记录，欢迎大家一起交流