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-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>
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)
posted @ 2018-03-13 05:09  大姐姐小姐姐  阅读(29145)  评论(0)  编辑  收藏  举报