当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
基础用法
有两种触发子菜单的方式
只需为 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>
)
}
隐藏代码
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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) | — | — |
props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 指定选项的值为选项对象的某个属性值 | string | — | — |
| label | 指定选项标签为选项对象的某个属性值 | string | — | — |
| children | 指定选项的子选项为选项对象的某个属性值 | string | — | — |
| disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | — |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | 当前值 |
| activeItemChange | 当父级选项变化时触发的事件，仅在 change-on-select 为 false 时可用 | 各父级选项组成的数组 |
作者：唐伯虎点蚊香，如若转载，请注明出处：https://www.web176.com/elementreact/20000.html
支付宝 
微信 