``` //使用级联选择器，默认点击展开 ,options用来指定数据源           // :props属性：用来指定数据对象            //v-model:双向绑定数据，获取选中的值，此处把选中的id值保存,必须为一个数组            //@change事件：只要选中项发生变化，就会触发此事件           // change-on-select属性:设置可以选择任意一级，不设置只能选二级菜单 <el-cascader v-model ="selectdeKeys"             :options ="parentList"             @change ="parentCateChange"             :props ="cascaderProps" clearable change-on-select el-cascader> ``` 数据绑定对象：必须是一个数组 ``` // 父级分类列表 parentList : [         {id :1,cat_name:'分类1',cat_pid:0,cat_level:0,children:[{id :11,cat_name:'分类11',cat_pid:0,cat\_level:1}\]},         {id :2,cat_name:'分类2',cat_pid:0,cat_level:1,children:[{id :12,cat_name:'分类12',cat_pid:0,cat\_level:1}\]},         {id :3,cat_name:'分类3',cat_pid:0,cat_level:2,children:[{id :13,cat_name:'分类13',cat_pid:0,cat\_level:1}\]}         ], ``` 级联选择器数据源配置 指定级联选择器的配置对象，对应字段名称 ``` cascaderProps : { value :'id', //选中的值 label :'cat_name', //标题名称 children :'children' //子级名称  } ``` change事件，具体业务逻辑自行编辑 ``` // 级联选择器选项发生变化触发此函数 parentCateChange(){ //打印选中的父级id // console.log(this.selectdeKeys) // 如果selectdeKeys的长度大于0，说明选中了父级分类 if(this.selectdeKeys.length > 0){ // 把父级id赋值给表单， //因为类别可能有多级，我们只需要最后一级，所以截取数组中最后一个值 this.addCateForm.cat_pid = this.selectdeKeys[this.selectdeKeys.length-1]; // 类别的级别和选中的数组的长度是一样的，如：1,3 this.addCateForm.cat_level = this.selectdeKeys.length return }else{ // 如果没有选择，即为顶级分类，pid和level重置为0 //父级id this.addCateForm.cat_pid = 0 // 级别 this.addCateForm.cat_level = 0  }     }, ```