当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。
基础用法
有两种触发子菜单的方式
只需为 Cascader 的options
属性指定选项数组即可渲染出一个级联选择器。
通过expand-trigger
可以定义展开子级菜单的触发方式。
本例还展示了change
事件,它的参数为 Cascader 的绑定值:一个由各级菜单的值所组成的数组。
默认 click 触发子菜单
hover 触发子菜单
禁用选项
通过在数据源中设置 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
属性的用法。
可搜索
可以快捷地搜索选项并选择。
将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) |