當一個數據集合有清晰的層級結構時，可通過級聯選擇器逐級查看并選擇。

基礎用法

有兩種觸發子菜單的方式

只需為 Cascader 的options屬性指定選項數組即可渲染出一個級聯選擇器。

通過expand-trigger可以定義展開子級菜單的觸發方式。

本例還展示了change事件，它的參數為 Cascader 的綁定值：一個由各級菜單的值所組成的數組。

<div class="block"><span class="demonstration">默認 click 觸發子菜單</span><el-cascader:options="options"v-model="selectedOptions"@change="handleChange"></el-cascader> </div> <div class="block"><span class="demonstration">hover 觸發子菜單</span><el-cascaderexpand-trigger="hover":options="options"v-model="selectedOptions2"@change="handleChange"></el-cascader> </div><script>export default {data() {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'zujian',label: '組件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字體'}, {value: 'icon',label: 'Icon 圖標'}, {value: 'button',label: 'Button 按鈕'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 單選框'}, {value: 'checkbox',label: 'Checkbox 多選框'}, {value: 'input',label: 'Input 輸入框'}, {value: 'input-number',label: 'InputNumber 計數器'}, {value: 'select',label: 'Select 選擇器'}, {value: 'cascader',label: 'Cascader 級聯選擇器'}, {value: 'switch',label: 'Switch 開關'}, {value: 'slider',label: 'Slider 滑塊'}, {value: 'time-picker',label: 'TimePicker 時間選擇器'}, {value: 'date-picker',label: 'DatePicker 日期選擇器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期時間選擇器'}, {value: 'upload',label: 'Upload 上傳'}, {value: 'rate',label: 'Rate 評分'}, {value: 'form',label: 'Form 表單'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 標簽'}, {value: 'progress',label: 'Progress 進度條'}, {value: 'tree',label: 'Tree 樹形控件'}, {value: 'pagination',label: 'Pagination 分頁'}, {value: 'badge',label: 'Badge 標記'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加載'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 彈框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 導航菜單'}, {value: 'tabs',label: 'Tabs 標簽頁'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜單'}, {value: 'steps',label: 'Steps 步驟條'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 對話框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 彈出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走馬燈'}, {value: 'collapse',label: 'Collapse 折疊面板'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}],selectedOptions: [],selectedOptions2: []};},methods: {handleChange(value) {console.log(value);}}}; </script>

　　

禁用選項

通過在數據源中設置?disabled?字段來聲明該選項是禁用的

本例中，options指定的數組中的第一個元素含有disabled: true鍵值對，因此是禁用的。在默認情況下，Cascader 會檢查數據中每一項的disabled字段是否為true，如果你的數據中表示禁用含義的字段名不為disabled，可以通過props屬性來指定（詳見下方 API 表格）。當然，value、label和children這三個字段名也可以通過同樣的方式指定。

1 <el-cascader 2 :options="optionsWithDisabled" 3 ></el-cascader> 4 <script> 5 export default { 6 data() { 7 return { 8 optionsWithDisabled: [{ 9 value: 'zhinan', 10 label: '指南', 11 disabled: true, 12 children: [{ 13 value: 'shejiyuanze', 14 label: '設計原則', 15 children: [{ 16 value: 'yizhi', 17 label: '一致' 18 }, { 19 value: 'fankui', 20 label: '反饋' 21 }, { 22 value: 'xiaolv', 23 label: '效率' 24 }, { 25 value: 'kekong', 26 label: '可控' 27 }] 28 }, { 29 value: 'daohang', 30 label: '導航', 31 children: [{ 32 value: 'cexiangdaohang', 33 label: '側向導航' 34 }, { 35 value: 'dingbudaohang', 36 label: '頂部導航' 37 }] 38 }] 39 }, { 40 value: 'zujian', 41 label: '組件', 42 children: [{ 43 value: 'basic', 44 label: 'Basic', 45 children: [{ 46 value: 'layout', 47 label: 'Layout 布局' 48 }, { 49 value: 'color', 50 label: 'Color 色彩' 51 }, { 52 value: 'typography', 53 label: 'Typography 字體' 54 }, { 55 value: 'icon', 56 label: 'Icon 圖標' 57 }, { 58 value: 'button', 59 label: 'Button 按鈕' 60 }] 61 }, { 62 value: 'form', 63 label: 'Form', 64 children: [{ 65 value: 'radio', 66 label: 'Radio 單選框' 67 }, { 68 value: 'checkbox', 69 label: 'Checkbox 多選框' 70 }, { 71 value: 'input', 72 label: 'Input 輸入框' 73 }, { 74 value: 'input-number', 75 label: 'InputNumber 計數器' 76 }, { 77 value: 'select', 78 label: 'Select 選擇器' 79 }, { 80 value: 'cascader', 81 label: 'Cascader 級聯選擇器' 82 }, { 83 value: 'switch', 84 label: 'Switch 開關' 85 }, { 86 value: 'slider', 87 label: 'Slider 滑塊' 88 }, { 89 value: 'time-picker', 90 label: 'TimePicker 時間選擇器' 91 }, { 92 value: 'date-picker', 93 label: 'DatePicker 日期選擇器' 94 }, { 95 value: 'datetime-picker', 96 label: 'DateTimePicker 日期時間選擇器' 97 }, { 98 value: 'upload', 99 label: 'Upload 上傳' 100 }, { 101 value: 'rate', 102 label: 'Rate 評分' 103 }, { 104 value: 'form', 105 label: 'Form 表單' 106 }] 107 }, { 108 value: 'data', 109 label: 'Data', 110 children: [{ 111 value: 'table', 112 label: 'Table 表格' 113 }, { 114 value: 'tag', 115 label: 'Tag 標簽' 116 }, { 117 value: 'progress', 118 label: 'Progress 進度條' 119 }, { 120 value: 'tree', 121 label: 'Tree 樹形控件' 122 }, { 123 value: 'pagination', 124 label: 'Pagination 分頁' 125 }, { 126 value: 'badge', 127 label: 'Badge 標記' 128 }] 129 }, { 130 value: 'notice', 131 label: 'Notice', 132 children: [{ 133 value: 'alert', 134 label: 'Alert 警告' 135 }, { 136 value: 'loading', 137 label: 'Loading 加載' 138 }, { 139 value: 'message', 140 label: 'Message 消息提示' 141 }, { 142 value: 'message-box', 143 label: 'MessageBox 彈框' 144 }, { 145 value: 'notification', 146 label: 'Notification 通知' 147 }] 148 }, { 149 value: 'navigation', 150 label: 'Navigation', 151 children: [{ 152 value: 'menu', 153 label: 'NavMenu 導航菜單' 154 }, { 155 value: 'tabs', 156 label: 'Tabs 標簽頁' 157 }, { 158 value: 'breadcrumb', 159 label: 'Breadcrumb 面包屑' 160 }, { 161 value: 'dropdown', 162 label: 'Dropdown 下拉菜單' 163 }, { 164 value: 'steps', 165 label: 'Steps 步驟條' 166 }] 167 }, { 168 value: 'others', 169 label: 'Others', 170 children: [{ 171 value: 'dialog', 172 label: 'Dialog 對話框' 173 }, { 174 value: 'tooltip', 175 label: 'Tooltip 文字提示' 176 }, { 177 value: 'popover', 178 label: 'Popover 彈出框' 179 }, { 180 value: 'card', 181 label: 'Card 卡片' 182 }, { 183 value: 'carousel', 184 label: 'Carousel 走馬燈' 185 }, { 186 value: 'collapse', 187 label: 'Collapse 折疊面板' 188 }] 189 }] 190 }, { 191 value: 'ziyuan', 192 label: '資源', 193 children: [{ 194 value: 'axure', 195 label: 'Axure Components' 196 }, { 197 value: 'sketch', 198 label: 'Sketch Templates' 199 }, { 200 value: 'jiaohu', 201 label: '組件交互文檔' 202 }] 203 }] 204 }; 205 } 206 }; 207 </script> View Code

?

僅顯示最后一級

可以僅在輸入框中顯示選中項最后一級的標簽，而不是選中項所在的完整路徑。

屬性show-all-levels定義了是否顯示完整的路徑，將其賦值為false則僅顯示最后一級

1 <el-cascader 2 :options="options" 3 :show-all-levels="false" 4 ></el-cascader> 5 <script> 6 export default { 7 data() { 8 return { 9 options: [{ 10 value: 'zhinan', 11 label: '指南', 12 children: [{ 13 value: 'shejiyuanze', 14 label: '設計原則', 15 children: [{ 16 value: 'yizhi', 17 label: '一致' 18 }, { 19 value: 'fankui', 20 label: '反饋' 21 }, { 22 value: 'xiaolv', 23 label: '效率' 24 }, { 25 value: 'kekong', 26 label: '可控' 27 }] 28 }, { 29 value: 'daohang', 30 label: '導航', 31 children: [{ 32 value: 'cexiangdaohang', 33 label: '側向導航' 34 }, { 35 value: 'dingbudaohang', 36 label: '頂部導航' 37 }] 38 }] 39 }, { 40 value: 'zujian', 41 label: '組件', 42 children: [{ 43 value: 'basic', 44 label: 'Basic', 45 children: [{ 46 value: 'layout', 47 label: 'Layout 布局' 48 }, { 49 value: 'color', 50 label: 'Color 色彩' 51 }, { 52 value: 'typography', 53 label: 'Typography 字體' 54 }, { 55 value: 'icon', 56 label: 'Icon 圖標' 57 }, { 58 value: 'button', 59 label: 'Button 按鈕' 60 }] 61 }, { 62 value: 'form', 63 label: 'Form', 64 children: [{ 65 value: 'radio', 66 label: 'Radio 單選框' 67 }, { 68 value: 'checkbox', 69 label: 'Checkbox 多選框' 70 }, { 71 value: 'input', 72 label: 'Input 輸入框' 73 }, { 74 value: 'input-number', 75 label: 'InputNumber 計數器' 76 }, { 77 value: 'select', 78 label: 'Select 選擇器' 79 }, { 80 value: 'cascader', 81 label: 'Cascader 級聯選擇器' 82 }, { 83 value: 'switch', 84 label: 'Switch 開關' 85 }, { 86 value: 'slider', 87 label: 'Slider 滑塊' 88 }, { 89 value: 'time-picker', 90 label: 'TimePicker 時間選擇器' 91 }, { 92 value: 'date-picker', 93 label: 'DatePicker 日期選擇器' 94 }, { 95 value: 'datetime-picker', 96 label: 'DateTimePicker 日期時間選擇器' 97 }, { 98 value: 'upload', 99 label: 'Upload 上傳' 100 }, { 101 value: 'rate', 102 label: 'Rate 評分' 103 }, { 104 value: 'form', 105 label: 'Form 表單' 106 }] 107 }, { 108 value: 'data', 109 label: 'Data', 110 children: [{ 111 value: 'table', 112 label: 'Table 表格' 113 }, { 114 value: 'tag', 115 label: 'Tag 標簽' 116 }, { 117 value: 'progress', 118 label: 'Progress 進度條' 119 }, { 120 value: 'tree', 121 label: 'Tree 樹形控件' 122 }, { 123 value: 'pagination', 124 label: 'Pagination 分頁' 125 }, { 126 value: 'badge', 127 label: 'Badge 標記' 128 }] 129 }, { 130 value: 'notice', 131 label: 'Notice', 132 children: [{ 133 value: 'alert', 134 label: 'Alert 警告' 135 }, { 136 value: 'loading', 137 label: 'Loading 加載' 138 }, { 139 value: 'message', 140 label: 'Message 消息提示' 141 }, { 142 value: 'message-box', 143 label: 'MessageBox 彈框' 144 }, { 145 value: 'notification', 146 label: 'Notification 通知' 147 }] 148 }, { 149 value: 'navigation', 150 label: 'Navigation', 151 children: [{ 152 value: 'menu', 153 label: 'NavMenu 導航菜單' 154 }, { 155 value: 'tabs', 156 label: 'Tabs 標簽頁' 157 }, { 158 value: 'breadcrumb', 159 label: 'Breadcrumb 面包屑' 160 }, { 161 value: 'dropdown', 162 label: 'Dropdown 下拉菜單' 163 }, { 164 value: 'steps', 165 label: 'Steps 步驟條' 166 }] 167 }, { 168 value: 'others', 169 label: 'Others', 170 children: [{ 171 value: 'dialog', 172 label: 'Dialog 對話框' 173 }, { 174 value: 'tooltip', 175 label: 'Tooltip 文字提示' 176 }, { 177 value: 'popover', 178 label: 'Popover 彈出框' 179 }, { 180 value: 'card', 181 label: 'Card 卡片' 182 }, { 183 value: 'carousel', 184 label: 'Carousel 走馬燈' 185 }, { 186 value: 'collapse', 187 label: 'Collapse 折疊面板' 188 }] 189 }] 190 }, { 191 value: 'ziyuan', 192 label: '資源', 193 children: [{ 194 value: 'axure', 195 label: 'Axure Components' 196 }, { 197 value: 'sketch', 198 label: 'Sketch Templates' 199 }, { 200 value: 'jiaohu', 201 label: '組件交互文檔' 202 }] 203 }] 204 }; 205 } 206 }; 207 </script> View Code

?

默認值

默認值通過數組的方式指定。

1 <el-cascader 2 :options="options" 3 v-model="selectedOptions3" 4 ></el-cascader> 5 <script> 6 export default { 7 data() { 8 return { 9 options: [{ 10 value: 'zhinan', 11 label: '指南', 12 children: [{ 13 value: 'shejiyuanze', 14 label: '設計原則', 15 children: [{ 16 value: 'yizhi', 17 label: '一致' 18 }, { 19 value: 'fankui', 20 label: '反饋' 21 }, { 22 value: 'xiaolv', 23 label: '效率' 24 }, { 25 value: 'kekong', 26 label: '可控' 27 }] 28 }, { 29 value: 'daohang', 30 label: '導航', 31 children: [{ 32 value: 'cexiangdaohang', 33 label: '側向導航' 34 }, { 35 value: 'dingbudaohang', 36 label: '頂部導航' 37 }] 38 }] 39 }, { 40 value: 'zujian', 41 label: '組件', 42 children: [{ 43 value: 'basic', 44 label: 'Basic', 45 children: [{ 46 value: 'layout', 47 label: 'Layout 布局' 48 }, { 49 value: 'color', 50 label: 'Color 色彩' 51 }, { 52 value: 'typography', 53 label: 'Typography 字體' 54 }, { 55 value: 'icon', 56 label: 'Icon 圖標' 57 }, { 58 value: 'button', 59 label: 'Button 按鈕' 60 }] 61 }, { 62 value: 'form', 63 label: 'Form', 64 children: [{ 65 value: 'radio', 66 label: 'Radio 單選框' 67 }, { 68 value: 'checkbox', 69 label: 'Checkbox 多選框' 70 }, { 71 value: 'input', 72 label: 'Input 輸入框' 73 }, { 74 value: 'input-number', 75 label: 'InputNumber 計數器' 76 }, { 77 value: 'select', 78 label: 'Select 選擇器' 79 }, { 80 value: 'cascader', 81 label: 'Cascader 級聯選擇器' 82 }, { 83 value: 'switch', 84 label: 'Switch 開關' 85 }, { 86 value: 'slider', 87 label: 'Slider 滑塊' 88 }, { 89 value: 'time-picker', 90 label: 'TimePicker 時間選擇器' 91 }, { 92 value: 'date-picker', 93 label: 'DatePicker 日期選擇器' 94 }, { 95 value: 'datetime-picker', 96 label: 'DateTimePicker 日期時間選擇器' 97 }, { 98 value: 'upload', 99 label: 'Upload 上傳' 100 }, { 101 value: 'rate', 102 label: 'Rate 評分' 103 }, { 104 value: 'form', 105 label: 'Form 表單' 106 }] 107 }, { 108 value: 'data', 109 label: 'Data', 110 children: [{ 111 value: 'table', 112 label: 'Table 表格' 113 }, { 114 value: 'tag', 115 label: 'Tag 標簽' 116 }, { 117 value: 'progress', 118 label: 'Progress 進度條' 119 }, { 120 value: 'tree', 121 label: 'Tree 樹形控件' 122 }, { 123 value: 'pagination', 124 label: 'Pagination 分頁' 125 }, { 126 value: 'badge', 127 label: 'Badge 標記' 128 }] 129 }, { 130 value: 'notice', 131 label: 'Notice', 132 children: [{ 133 value: 'alert', 134 label: 'Alert 警告' 135 }, { 136 value: 'loading', 137 label: 'Loading 加載' 138 }, { 139 value: 'message', 140 label: 'Message 消息提示' 141 }, { 142 value: 'message-box', 143 label: 'MessageBox 彈框' 144 }, { 145 value: 'notification', 146 label: 'Notification 通知' 147 }] 148 }, { 149 value: 'navigation', 150 label: 'Navigation', 151 children: [{ 152 value: 'menu', 153 label: 'NavMenu 導航菜單' 154 }, { 155 value: 'tabs', 156 label: 'Tabs 標簽頁' 157 }, { 158 value: 'breadcrumb', 159 label: 'Breadcrumb 面包屑' 160 }, { 161 value: 'dropdown', 162 label: 'Dropdown 下拉菜單' 163 }, { 164 value: 'steps', 165 label: 'Steps 步驟條' 166 }] 167 }, { 168 value: 'others', 169 label: 'Others', 170 children: [{ 171 value: 'dialog', 172 label: 'Dialog 對話框' 173 }, { 174 value: 'tooltip', 175 label: 'Tooltip 文字提示' 176 }, { 177 value: 'popover', 178 label: 'Popover 彈出框' 179 }, { 180 value: 'card', 181 label: 'Card 卡片' 182 }, { 183 value: 'carousel', 184 label: 'Carousel 走馬燈' 185 }, { 186 value: 'collapse', 187 label: 'Collapse 折疊面板' 188 }] 189 }] 190 }, { 191 value: 'ziyuan', 192 label: '資源', 193 children: [{ 194 value: 'axure', 195 label: 'Axure Components' 196 }, { 197 value: 'sketch', 198 label: 'Sketch Templates' 199 }, { 200 value: 'jiaohu', 201 label: '組件交互文檔' 202 }] 203 }], 204 selectedOptions3: ['zujian', 'data', 'tag'] 205 }; 206 } 207 }; 208 </script> View Code

?

選擇即改變

點擊或移入選項即表示選中該項，可用于選擇任意一級菜單的選項。

若需要允許用戶選擇任意一級選項，則可將change-on-select賦值為true

1 <el-cascader 2 :options="options" 3 change-on-select 4 ></el-cascader> 5 <script> 6 export default { 7 data() { 8 return { 9 options: [{ 10 value: 'zhinan', 11 label: '指南', 12 children: [{ 13 value: 'shejiyuanze', 14 label: '設計原則', 15 children: [{ 16 value: 'yizhi', 17 label: '一致' 18 }, { 19 value: 'fankui', 20 label: '反饋' 21 }, { 22 value: 'xiaolv', 23 label: '效率' 24 }, { 25 value: 'kekong', 26 label: '可控' 27 }] 28 }, { 29 value: 'daohang', 30 label: '導航', 31 children: [{ 32 value: 'cexiangdaohang', 33 label: '側向導航' 34 }, { 35 value: 'dingbudaohang', 36 label: '頂部導航' 37 }] 38 }] 39 }, { 40 value: 'zujian', 41 label: '組件', 42 children: [{ 43 value: 'basic', 44 label: 'Basic', 45 children: [{ 46 value: 'layout', 47 label: 'Layout 布局' 48 }, { 49 value: 'color', 50 label: 'Color 色彩' 51 }, { 52 value: 'typography', 53 label: 'Typography 字體' 54 }, { 55 value: 'icon', 56 label: 'Icon 圖標' 57 }, { 58 value: 'button', 59 label: 'Button 按鈕' 60 }] 61 }, { 62 value: 'form', 63 label: 'Form', 64 children: [{ 65 value: 'radio', 66 label: 'Radio 單選框' 67 }, { 68 value: 'checkbox', 69 label: 'Checkbox 多選框' 70 }, { 71 value: 'input', 72 label: 'Input 輸入框' 73 }, { 74 value: 'input-number', 75 label: 'InputNumber 計數器' 76 }, { 77 value: 'select', 78 label: 'Select 選擇器' 79 }, { 80 value: 'cascader', 81 label: 'Cascader 級聯選擇器' 82 }, { 83 value: 'switch', 84 label: 'Switch 開關' 85 }, { 86 value: 'slider', 87 label: 'Slider 滑塊' 88 }, { 89 value: 'time-picker', 90 label: 'TimePicker 時間選擇器' 91 }, { 92 value: 'date-picker', 93 label: 'DatePicker 日期選擇器' 94 }, { 95 value: 'datetime-picker', 96 label: 'DateTimePicker 日期時間選擇器' 97 }, { 98 value: 'upload', 99 label: 'Upload 上傳' 100 }, { 101 value: 'rate', 102 label: 'Rate 評分' 103 }, { 104 value: 'form', 105 label: 'Form 表單' 106 }] 107 }, { 108 value: 'data', 109 label: 'Data', 110 children: [{ 111 value: 'table', 112 label: 'Table 表格' 113 }, { 114 value: 'tag', 115 label: 'Tag 標簽' 116 }, { 117 value: 'progress', 118 label: 'Progress 進度條' 119 }, { 120 value: 'tree', 121 label: 'Tree 樹形控件' 122 }, { 123 value: 'pagination', 124 label: 'Pagination 分頁' 125 }, { 126 value: 'badge', 127 label: 'Badge 標記' 128 }] 129 }, { 130 value: 'notice', 131 label: 'Notice', 132 children: [{ 133 value: 'alert', 134 label: 'Alert 警告' 135 }, { 136 value: 'loading', 137 label: 'Loading 加載' 138 }, { 139 value: 'message', 140 label: 'Message 消息提示' 141 }, { 142 value: 'message-box', 143 label: 'MessageBox 彈框' 144 }, { 145 value: 'notification', 146 label: 'Notification 通知' 147 }] 148 }, { 149 value: 'navigation', 150 label: 'Navigation', 151 children: [{ 152 value: 'menu', 153 label: 'NavMenu 導航菜單' 154 }, { 155 value: 'tabs', 156 label: 'Tabs 標簽頁' 157 }, { 158 value: 'breadcrumb', 159 label: 'Breadcrumb 面包屑' 160 }, { 161 value: 'dropdown', 162 label: 'Dropdown 下拉菜單' 163 }, { 164 value: 'steps', 165 label: 'Steps 步驟條' 166 }] 167 }, { 168 value: 'others', 169 label: 'Others', 170 children: [{ 171 value: 'dialog', 172 label: 'Dialog 對話框' 173 }, { 174 value: 'tooltip', 175 label: 'Tooltip 文字提示' 176 }, { 177 value: 'popover', 178 label: 'Popover 彈出框' 179 }, { 180 value: 'card', 181 label: 'Card 卡片' 182 }, { 183 value: 'carousel', 184 label: 'Carousel 走馬燈' 185 }, { 186 value: 'collapse', 187 label: 'Collapse 折疊面板' 188 }] 189 }] 190 }, { 191 value: 'ziyuan', 192 label: '資源', 193 children: [{ 194 value: 'axure', 195 label: 'Axure Components' 196 }, { 197 value: 'sketch', 198 label: 'Sketch Templates' 199 }, { 200 value: 'jiaohu', 201 label: '組件交互文檔' 202 }] 203 }] 204 }; 205 } 206 }; 207 </script> View Code

?

動態加載次級選項

當選中某一級時，動態加載該級下的選項。

本例的選項數據源在初始化時不包含城市數據。利用active-item-change事件，可以在用戶點擊某個省份時拉取該省份下的城市數據。此外，本例還展示了props屬性的用法。

<el-cascader:options="options2"@active-item-change="handleItemChange":props="props" ></el-cascader><script>export default {data() {return {options2: [{label: '江蘇',cities: []}, {label: '浙江',cities: []}],props: {value: 'label',children: 'cities'}};},methods: {handleItemChange(val) {console.log('active item:', val);setTimeout(_ => {if (val.indexOf('江蘇') > -1 && !this.options2[0].cities.length) {this.options2[0].cities = [{label: '南京'}];} else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {this.options2[1].cities = [{label: '杭州'}];}}, 300);}}}; </script>

　　

可搜索

可以快捷地搜索選項并選擇。

將filterable賦值為true即可打開搜索功能。

1 <div class="block"> 2 <span class="demonstration">只可選擇最后一級菜單的選項</span> 3 <el-cascader 4 placeholder="試試搜索：指南" 5 :options="options" 6 filterable 7 ></el-cascader> 8 </div> 9 <div class="block"> 10 <span class="demonstration">可選擇任意一級菜單的選項</span> 11 <el-cascader 12 placeholder="試試搜索：指南" 13 :options="options" 14 filterable 15 change-on-select 16 ></el-cascader> 17 </div> 18 19 <script> 20 export default { 21 data() { 22 return { 23 options: [{ 24 value: 'zhinan', 25 label: '指南', 26 children: [{ 27 value: 'shejiyuanze', 28 label: '設計原則', 29 children: [{ 30 value: 'yizhi', 31 label: '一致' 32 }, { 33 value: 'fankui', 34 label: '反饋' 35 }, { 36 value: 'xiaolv', 37 label: '效率' 38 }, { 39 value: 'kekong', 40 label: '可控' 41 }] 42 }, { 43 value: 'daohang', 44 label: '導航', 45 children: [{ 46 value: 'cexiangdaohang', 47 label: '側向導航' 48 }, { 49 value: 'dingbudaohang', 50 label: '頂部導航' 51 }] 52 }] 53 }, { 54 value: 'zujian', 55 label: '組件', 56 children: [{ 57 value: 'basic', 58 label: 'Basic', 59 children: [{ 60 value: 'layout', 61 label: 'Layout 布局' 62 }, { 63 value: 'color', 64 label: 'Color 色彩' 65 }, { 66 value: 'typography', 67 label: 'Typography 字體' 68 }, { 69 value: 'icon', 70 label: 'Icon 圖標' 71 }, { 72 value: 'button', 73 label: 'Button 按鈕' 74 }] 75 }, { 76 value: 'form', 77 label: 'Form', 78 children: [{ 79 value: 'radio', 80 label: 'Radio 單選框' 81 }, { 82 value: 'checkbox', 83 label: 'Checkbox 多選框' 84 }, { 85 value: 'input', 86 label: 'Input 輸入框' 87 }, { 88 value: 'input-number', 89 label: 'InputNumber 計數器' 90 }, { 91 value: 'select', 92 label: 'Select 選擇器' 93 }, { 94 value: 'cascader', 95 label: 'Cascader 級聯選擇器' 96 }, { 97 value: 'switch', 98 label: 'Switch 開關' 99 }, { 100 value: 'slider', 101 label: 'Slider 滑塊' 102 }, { 103 value: 'time-picker', 104 label: 'TimePicker 時間選擇器' 105 }, { 106 value: 'date-picker', 107 label: 'DatePicker 日期選擇器' 108 }, { 109 value: 'datetime-picker', 110 label: 'DateTimePicker 日期時間選擇器' 111 }, { 112 value: 'upload', 113 label: 'Upload 上傳' 114 }, { 115 value: 'rate', 116 label: 'Rate 評分' 117 }, { 118 value: 'form', 119 label: 'Form 表單' 120 }] 121 }, { 122 value: 'data', 123 label: 'Data', 124 children: [{ 125 value: 'table', 126 label: 'Table 表格' 127 }, { 128 value: 'tag', 129 label: 'Tag 標簽' 130 }, { 131 value: 'progress', 132 label: 'Progress 進度條' 133 }, { 134 value: 'tree', 135 label: 'Tree 樹形控件' 136 }, { 137 value: 'pagination', 138 label: 'Pagination 分頁' 139 }, { 140 value: 'badge', 141 label: 'Badge 標記' 142 }] 143 }, { 144 value: 'notice', 145 label: 'Notice', 146 children: [{ 147 value: 'alert', 148 label: 'Alert 警告' 149 }, { 150 value: 'loading', 151 label: 'Loading 加載' 152 }, { 153 value: 'message', 154 label: 'Message 消息提示' 155 }, { 156 value: 'message-box', 157 label: 'MessageBox 彈框' 158 }, { 159 value: 'notification', 160 label: 'Notification 通知' 161 }] 162 }, { 163 value: 'navigation', 164 label: 'Navigation', 165 children: [{ 166 value: 'menu', 167 label: 'NavMenu 導航菜單' 168 }, { 169 value: 'tabs', 170 label: 'Tabs 標簽頁' 171 }, { 172 value: 'breadcrumb', 173 label: 'Breadcrumb 面包屑' 174 }, { 175 value: 'dropdown', 176 label: 'Dropdown 下拉菜單' 177 }, { 178 value: 'steps', 179 label: 'Steps 步驟條' 180 }] 181 }, { 182 value: 'others', 183 label: 'Others', 184 children: [{ 185 value: 'dialog', 186 label: 'Dialog 對話框' 187 }, { 188 value: 'tooltip', 189 label: 'Tooltip 文字提示' 190 }, { 191 value: 'popover', 192 label: 'Popover 彈出框' 193 }, { 194 value: 'card', 195 label: 'Card 卡片' 196 }, { 197 value: 'carousel', 198 label: 'Carousel 走馬燈' 199 }, { 200 value: 'collapse', 201 label: 'Collapse 折疊面板' 202 }] 203 }] 204 }, { 205 value: 'ziyuan', 206 label: '資源', 207 children: [{ 208 value: 'axure', 209 label: 'Axure Components' 210 }, { 211 value: 'sketch', 212 label: 'Sketch Templates' 213 }, { 214 value: 'jiaohu', 215 label: '組件交互文檔' 216 }] 217 }] 218 }; 219 } 220 }; 221 </script> View Code

?

Attributes

參數說明類型可選值默認值

options	可選項數據源，鍵名可通過?props?屬性配置	array	—	—
props	配置選項，具體見下表	object	—	—
value	選中項綁定值	array	—	—
separator	選項分隔符	string	—	斜杠'/'
popper-class	自定義浮層類名	string	—	—
placeholder	輸入框占位文本	string	—	請選擇
disabled	是否禁用	boolean	—	false
clearable	是否支持清空選項	boolean	—	false
expand-trigger	次級菜單的展開方式	string	click / hover	click
show-all-levels	輸入框中是否顯示選中值的完整路徑	boolean	—	true
filterable	是否可搜索選項	boolean	—	—
debounce	搜索關鍵詞輸入的去抖延遲，毫秒	number	—	300
change-on-select	是否允許選擇任意一級的選項	boolean	—	false
size	尺寸	string	medium / small / mini	—
before-filter	篩選之前的鉤子，參數為輸入的值，若返回 false 或者返回 Promise 且被 reject，則停止篩選	function(value)	—	—

props

參數說明類型可選值默認值

value	指定選項的值為選項對象的某個屬性值	string	—	—
label	指定選項標簽為選項對象的某個屬性值	string	—	—
children	指定選項的子選項為選項對象的某個屬性值	string	—	—
disabled	指定選項的禁用為選項對象的某個屬性值	string	—	—

Events

事件名稱說明回調參數

change	當綁定值變化時觸發的事件	當前值
active-item-change	當父級選項變化時觸發的事件，僅在?change-on-select為?false?時可用	各父級選項組成的數組
blur	在 Cascader 失去焦點時觸發	(event: Event)
focus	在 Cascader 獲得焦點時觸發	(event: Event)

轉載于:https://www.cnblogs.com/grt322/p/8553319.html

總結

以上是生活随笔為你收集整理的Cascader 级联选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。