当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
有两种触发子菜单的方式
只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过expandTrigger可以定义展开子级菜单的触发方式。本例还展示了onChange事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。
constructor(props) {
super(props);
this.state = {
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: []
}
}
handleChange(key, value) {
this.setState({ [key]: value });
console.log(value);
}
render() {
return (
<div>
<div className="block">
<span className="demonstration">默认 click 触发子菜单</span>
<Cascader
options={this.state.options}
value={this.state.selectedOptions}
onChange={this.handleChange.bind(this, "selectedOptions")} />
</div>
<div className="block">
<span className="demonstration">hover 触发子菜单</span>
<Cascader
options={this.state.options}
expandTrigger="hover"
value={this.state.selectedOptions2}
onChange={this.handleChange.bind(this, "selectedOptions2")} />
</div>
</div>
)
}
通过在数据源中设置 disabled 字段来声明该选项是禁用的
本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props属性来指定（详见下方 API 表格）。当然，value、label和children这三个字段名也可以通过同样的方式指定。
constructor(props) {
super(props);
this.state = {
optionsWithDisabled: [{
value: "zhinan",
label: "指南",
disabled: true,
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: "组件交互文档"
}]
}]
};
}
render() {
return (
<Cascader
options={this.state.optionsWithDisabled}
/>
)
}
可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。
属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级
constructor(props) {
super(props);
this.state = {
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: "组件交互文档"
}]
}]
}
}
render() {
return (
<Cascader
options={this.state.options}
showAllLevels={false}
/>
)
}
默认值通过数组的方式指定。
constructor(props) {
super(props);
this.state = {
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: "组件交互文档"
}]
}],
selectedOptions3: ["zujian", "data", "tag"]
}
}
render() {
return (
<Cascader
options={this.state.options}
value={this.state.selectedOptions3}
/>
)
}
点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。
若需要允许用户选择任意一级选项，则可将change-on-select赋值为true
constructor(props) {
super(props);
this.state = {
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: "组件交互文档"
}]
}]
};
}
render() {
return (
<Cascader
options={this.state.options}
changeOnSelect={true}
/>
)
}
当选中某一级时，动态加载该级下的选项。
本例的选项数据源在初始化时不包含城市数据。利用active-item-change事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了props属性的用法。
constructor(props) {
super(props);
this.state = {
options2: [{
label: "江苏",
cities: []
}, {
label: "浙江",
cities: []
}],
props: {
value: "label",
children: "cities"
}
};
}
handleItemChange(val) {
console.log("active item:", val);
setTimeout(() => {
if (val.indexOf("江苏") > -1 && !this.state.options2[0].cities.length) {
this.state.options2[0].cities = [{
label: "南京"
}];
} else if (val.indexOf("浙江") > -1 && !this.state.options2[1].cities.length) {
this.state.options2[1].cities = [{
label: "杭州"
}];
}
this.forceUpdate();
}, 300);
}
render() {
return (
<Cascader
props={this.state.props}
options={this.state.options2}
activeItemChange={this.handleItemChange.bind(this)}
/>
)
}
可以快捷地搜索选项并选择。
将filterable赋值为true即可打开搜索功能。
constructor(props) {
super(props);
this.state = {
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: "组件交互文档"
}]
}]
}
}
render() {
return (
<div>
<div className="block">
<span className="demonstration">只可选择最后一级菜单的选项</span>
<Cascader
placeholder="试试搜索：指南"
options={this.state.options}
filterable={true}
/>
</div>
<div className="block">
<span className="demonstration">可选择任意一级菜单的选项</span>
<Cascader
placeholder="试试搜索：指南"
options={this.state.options}
filterable={true}
changeOnSelect={true}
/>
</div>
</div>
)
}
隐藏代码
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| options | 可选项数据源，键名可通过 props 属性配置 |
array | — | — |
| props | 配置选项，具体见下表 | object | — | — |
| value | 选中项绑定值 | array | — | — |
| popperClass | 自定义浮层类名 | string | — | — |
| placeholder | 输入框占位文本 | string | — | 请选择 |
| disabled | 是否禁用 | boolean | — | false |
| clearable | 是否支持清空选项 | boolean | — | false |
| expandTrigger | 次级菜单的展开方式 | string | click / hover | click |
| showAllLevels | 输入框中是否显示选中值的完整路径 | boolean | — | true |
| filterable | 是否可搜索选项 | boolean | — | — |
| debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |
| changeOnSelect | 是否允许选择任意一级的选项 | boolean | — | false |
| size | 尺寸 | string | large / small / mini | — |
| beforeFilter | 可选参数, 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选。 | function(value) | — | — |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 指定选项的值为选项对象的某个属性值 | string | — | — |
| label | 指定选项标签为选项对象的某个属性值 | string | — | — |
| children | 指定选项的子选项为选项对象的某个属性值 | string | — | — |
| disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | — |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | 当前值 |
| activeItemChange | 当父级选项变化时触发的事件，仅在 change-on-select 为 false 时可用 |
各父级选项组成的数组 |
Avatar 头像用图标、图片或者字符的形式展示用户或事物信息。基本用法通过shape和size设置头像的形状和大小。templateel-row cla...
action.timeline | *时间轴组件相关的行为，必须引入时间轴组件后才能使用。action.timeline.timelineChange | Action设置当前的...
parallel.zlevel |number[ default: 0 ]设置 ECharts 平行坐标系所有图形的 zlevel 值。zlevel 用于 Canvas 分层（一种常见的优...
singleAxis.splitArea |ObjectECharts 单轴在grid区域中的分隔区域，默认不显示。singleAxis.splitArea.interval |number, Funct...
什么是 ECharts 折线图标域？折线图标域是用来对图表中的某个范围的数据进行标记的，通过折线图标域，你可以了解某段时间图表中...