diff --git a/packages/react-cascader/README.md b/packages/react-cascader/README.md
index 8429d8cd3c..303021d838 100644
--- a/packages/react-cascader/README.md
+++ b/packages/react-cascader/README.md
@@ -8,7 +8,7 @@ Cascader 级联选择
级联选择框。v4.16.0中添加
```jsx
-import { Cascader } from 'uiw';
+import { Cascader, Row, Col } from 'uiw';
// or
import Cascader from '@uiw/react-cascader';
```
@@ -56,15 +56,29 @@ const Demo = () => {
];
return (
-
- < Cascader
- allowClear={true}
- placeholder="请选择"
- value={[1, 4, 7]}
- option={options}
- onChange={(value, seleteds) => console.log(value, seleteds)}
- />
-
+
+
+ console.log(value, seleteds)}
+ />
+
+
+ console.log(value, seleteds)}
+ />
+
+
)
};
ReactDOM.render(, _mount_);
@@ -113,16 +127,15 @@ const Demo = () => {
];
return (
-
- console.log(value, seleteds)}
- onSearch={(text)=> console.log('text', text)}
- />
-
+ console.log(value, seleteds)}
+ onSearch={(text)=> console.log('text', text)}
+ />
)
};
ReactDOM.render(, _mount_);
@@ -244,6 +257,7 @@ ReactDOM.render(, _mount_);
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ---- | ---- | ---- | ---- | ---- |
| allowClear | 支持清除 | Boolean | `false` | - |
+| disabled | 禁用选择器 | Boolean | `false` | - |
| placeholder | 选择框默认文字 | String | - | - |
| option | 选项菜单 | { value: String \| Number, label: React.ReactNode, children: Array} | - | - |
| value | 指定当前选中的条目,多选时为一个数组 | String[] \| Number[] | - | - |
diff --git a/packages/react-cascader/src/index.tsx b/packages/react-cascader/src/index.tsx
index 0e4b2d92e5..0d6906c5f5 100644
--- a/packages/react-cascader/src/index.tsx
+++ b/packages/react-cascader/src/index.tsx
@@ -17,6 +17,7 @@ export interface CascaderProps extends IProps, DropdownProps {
onSearch?: boolean | ((searchText: string) => void);
allowClear?: boolean;
placeholder?: string;
+ disabled?: boolean;
}
function Cascader(props: CascaderProps) {
@@ -25,6 +26,7 @@ function Cascader(props: CascaderProps) {
onChange,
onSearch,
+ disabled,
allowClear,
placeholder,
prefixCls = 'w-cascader',
@@ -131,7 +133,7 @@ function Cascader(props: CascaderProps) {
onSearch && handelSearch(value);
};
- const widths = (style?.width as number) * 0.5 || undefined;
+ const widths = (style?.width as number) * 0.7 || undefined;
const OptionIter = (option: Array, level: number = 0) => {
if (!option) return;
@@ -178,6 +180,7 @@ function Cascader(props: CascaderProps) {
trigger="click"
style={{ marginTop: 5, ...style }}
overlayStyl={{ width: 100 }}
+ disabled={disabled}
{...others}
onVisibleChange={onVisibleChange}
isOpen={innerIsOpen}
@@ -225,6 +228,7 @@ function Cascader(props: CascaderProps) {
onSearch && setSearchOn(true)}
@@ -232,7 +236,7 @@ function Cascader(props: CascaderProps) {
readOnly={!onSearch}
addonAfter={
- {selectIconType === 'close' && (
+ {!disabled && selectIconType === 'close' && (
)}