``` //使用級聯選擇器，默認點擊展開?,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 ?} ????}, ```