Cascader 级联选择器

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

基础用法

有两种触发子菜单的方式

只需为 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)