Cascader 级联选择器
2024-04-08 07:14:23
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
基础用法
有两种触发子菜单的方式
只需为 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 级联选择器相关推荐
- Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
- Cascader 级联选择器如何根据给定的叶节点值设置默认值（数据回显）
转载自:Cascader 级联选择器如何设置默认值(数据回显)_༺举个栗子吧༻的博客-CSDN博客_选择器设置默认值 官网cascader:https://element.eleme.cn/#/zh- ...
- Cascader 级联选择器、Select 选择器和date-picker日期选择器的宽度设置
像select选择器的宽度设置一般是这样 <el-select v-model="value" placeholder="请选择" style=" ...
- elementUI样式修改（Cascader 级联选择器）
elementui的问世,大大提高了前端开发的工作效率,但同时也 带给我们不少烦恼.我们要用UI组件就免不了要对它做一些个性化定制需求,所以我们就必须要覆盖element的一些样式 下面是我开发中遇到 ...
- vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问 ...
- 解决cascader级联选择器报错“level“ of null
1. 需求:级联选择器数据与另一文本框有联系,如果文本框有值,则相同的值在cascader的数据中置灰,不可选.如果先选择了cascader的值,再填文本框的值发现两选值相同,则将cascader的选 ...
- 修改element组件库中Cascader级联选择器下拉列表的默认样式
在保证不影响其他页面中Cascader样式的情况下(首先就不能删除scoped),如果css用到less预处理器,想到的第一个解决办法就是用深度选择器">>>" ...
- element-ui中Cascader 级联选择器组件使用(默认选择是value(id)，还想要获取label(name值))
我的需求是一个下拉框选中城市(先选中省-对应市显示-选中显示在下拉框中)注:区不要 但是我之前封装了一个三级联动的,所以我需要重新封装一个: cityMap.js const map = {11000 ...
- Element-UI中Cascader 级联选择器使用
Element-UI的级联组件官方文档 <el-cascaderv-model="value":options="options":props=" ...
最新文章
- java打印文档_从Java应用程序打印文档？
- 给GAN一句描述，它就能按要求画画，微软CVPR新研究 | 附PyTorch代码
- Prim算法 求出 最小生成树
- 分数DRL：在OptaPlanner中更快，更轻松
- 在 WinCe 平台读写 ini 文件
- 头条自己提问的问题在哪看_在头条的这三十天
- php curl_error源码,PHP curl_error函数
- 目标检测——检测结果的可视化
- 来不及说再见，Kobe
- 工业4.0时代，怎样为孩子筹备未来教育？
- 用blender环绕物体拍摄
- Redis中五中数据类型的实例
- Windows C盘清理
- ECC椭圆曲线加密的特点以及在有限域(Fp)的三点共线问题
- 滴滴巨亏背后，打江山容易，守江山难？
- mysql 锁（三）
- InfluxDB常用函数
- 虚拟机安装pycharm
- java模拟国际象棋游戏_Javafx实现国际象棋游戏
- orcale 基本語法