cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
109 lines (98 loc) • 9.1 kB
Markdown
CascaderSelect 级联选择组件。
## 示例
```tsx
import React from 'react';
import { CascaderSelect } from '@alicloud/console-components';
const childrenDataSouce = [
{
value: '1000101',
label: '默认项',
},
{
value: '1000102',
label: '聚焦项',
},
{
value: '1000103',
label: '文本信息 选中项',
},
{
value: '1000104',
label: '文本信息 选中项',
disabled: true,
},
];
const cascaderDataSource = [
{
value: '10001',
label: '默认项',
children: childrenDataSouce,
},
{
value: '10002',
label: '聚焦项',
children: childrenDataSouce,
},
{
value: '10003',
label: '选中项',
children: childrenDataSouce,
},
{
value: '10004',
label: '失败项',
children: childrenDataSouce,
checkboxDisabled: true,
},
];
export default function App() {
return (
<div className="App">
<CascaderSelect
multiple
style={{
width: '302px',
}}
dataSource={cascaderDataSource}
/>
</div>
);
}
export const meta = {
title: '多选级联',
describe: '展示基本的多选用法。',
};
```
## API
### CascaderSelect
继承 Cascader, Select 的部分属性，支持透传给 Cascader 的属性有 dataSource, useVirtual, multiple, canOnlyCheckLeaf,
checkStrictly, resultRender, expandedValue, defaultExpandedValue, expandTriggerType, onExpand, listStyle,
listClassName, loadData, itemRender, immutable。支持透传给 Select 的包括除上面传给 Cascader 和下方单独列出的属性以外的其他全部属性。
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| -------------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- |
| size | 选择框大小 | 'small' | 'medium' | 'large' | 'medium' | | - |
| disabled | 是否禁用 | boolean | false | | - |
| hasArrow | 是否有下拉箭头 | boolean | true | | - |
| hasBorder | 是否有边框 | boolean | true | | - |
| hasClear | 是否有清除按钮 | boolean | false | | - |
| readOnly | 是否只读，只读模式下可以展开弹层但不能选 | boolean | - | | - |
| defaultValue | （非受控）默认值 | string | Array\<string> | - | | - |
| value | （受控）当前值 | string | Array\<string> | - | | - |
| onChange | 选中值改变时触发的回调函数 | (<br/> value: string | Array\<string> | null,<br/> data: CascaderDataItem | Array\<CascaderDataItem> | null,<br/> extra?: Extra<br/> ) => void | - | | - |
| changeOnSelect | 是否选中即发生改变，该属性仅在单选模式下有效 | boolean | false | | - |
| displayRender | 选择框单选时展示结果的自定义渲染函数 | (<br/> label: Array\<React.ReactNode>,<br/> data: CascaderSelectDataItem<br/> ) => React.ReactNode | - | | - |
| showSearch | 是否显示搜索框 | boolean | false | | - |
| filter | 自定义搜索函数 | (searchValue: string, path: CascaderSelectDataItem\[]) => boolean | - | | - |
| onSearch | 当搜索框值变化时回调 | (value: string) => void | - | | 1.23 |
| resultAutoWidth | 搜索结果列表是否和选择框等宽 | boolean | true | | - |
| notFoundContent | 无数据时显示内容 | React.ReactNode | - | | - |
| header | 自定义下拉框头部 | React.ReactNode | - | | - |
| footer | 自定义下拉框底部 | React.ReactNode | - | | - |
| defaultVisible | 初始下拉框是否显示 | boolean | false | | - |
| visible | 当前下拉框是否显示 | boolean | - | | - |
| onVisibleChange | 下拉框显示或关闭时触发事件的回调函数 | (visible: boolean, type?: CascaderSelectVisibleChangeType) => void | - | | - |
| popupProps | 透传到 Popup 的属性对象 | React.ComponentPropsWithRef\<typeof Popup> | - | | - |
| isPreview | 是否为预览态 | boolean | false | | - |
| renderPreview | 自定义预览态 | (<br/> value: CascaderSelectDataItem | CascaderSelectDataItem\[],<br/> props: CascaderSelectProps<br/> ) => React.ReactNode | - | | - |
| menuProps | 透传到 Cascader 的属性对象 | Omit\<CascaderProps, 'onSelect' | 'onChange'> | - | | - |
| autoClearSearchValue | 是否在选中项后清空搜索框，只在 multiple 为 true 时有效 | boolean