当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
基础用法
有两种触发子菜单的方式
只需为 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-cascader
expand-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>
仅显示最后一级
可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。
属性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>
默认值
默认值通过数组的方式指定。
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>
选择即改变
点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。
若需要允许用户选择任意一级选项，则可将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>
动态加载次级选项
当选中某一级时，动态加载该级下的选项。
本例的选项数据源在初始化时不包含城市数据。利用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>
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) |