@uiw/react-cascader

Cascader 级联选择
===


级联选择框。v4.16.0中添加

``jsx
import { Cascader, Row, Col } from 'uiw';
// or
import Cascader from '@uiw/react-cascader';
`

基础示例

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Cascader, Row } from 'uiw';

const Demo = () => {
const options = [
{
label: '上海市',
value: 1,
children: [
{
label: '徐汇区',
value: 4,
children: [
{ label: '半淞园路街道', value: 6 },
{ label: '南京东路街道', value: 7 },
{ label: '外滩街道', value: 8 },
]
},
]
},
{
label: '北京市',
value: 9,
children: [
{
label: '崇文区',
value: 12,
children: [
{ label: '东花市街道', value: 13 },
{ label: '体育馆路街道', value: 14 },
{ label: '前门街道', value: 15 },
]
},
]
},
];

return (


style={{ width:200 }}
allowClear={true}
placeholder="请选择"
value={[1, 4, 7]}
option={options}
onChange={(value, seleteds) => console.log(value, seleteds)}
/>


style={{ width:200 }}
allowClear={true}
placeholder="请选择"
value={[1, 4, 7]}
disabled={true}
option={options}
onChange={(value, seleteds) => console.log(value, seleteds)}
/>


)
};
export default Demo
`

尺寸

`jsx mdx:preview
import React from 'react';
import { Cascader, Row } from 'uiw';

const Demo = () => {
const options = [
{
label: '尺寸', value: 1,
children: [
{
label: 'size',
value: 2,
children: [
{ label: '小尺寸', value: 3 },
{ label: '默认尺寸', value: 4 },
{ label: '大尺寸', value: 5 },
]
},
]
}
];

return (

style={{ width: 150 }}
value={[1, 2, 3]}
option={options}
size="small"
/>
style={{ width: 175, marginTop: 10 }}
value={[1, 2, 4]}
option={options}
/>
style={{ width: 200, marginTop: 10 }}
value={[1, 2, 5]}
option={options}
size="large"
/>

)
};
export default Demo
`

搜索选项

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Cascader } from 'uiw';

const Demo = () => {
const options = [
{
label: '上海市',
value: 1,
children: [
{
label: '徐汇区',
value: 4,
children: [
{ label: '半淞园路街道', value: 6 },
{ label: '南京东路街道', value: 7 },
{ label: '外滩街道', value: 8 },
]
},
]
},
{
label: '北京市',
value: 9,
children: [
{
label: '崇文区',
value: 12,
children: [
{ label: '东花市街道', value: 13 },
{ label: '体育馆路街道', value: 14 },
{ label: '前门街道', value: 15 },
]
},
]
},
];

return (
style={{ width: 200 }}
allowClear={true}
placeholder="请选择"
value={[1, 4, 7]}
option={options}
onChange={(value, seleteds) => console.log(value, seleteds)}
onSearch={(text)=> console.log('text', text)}
/>
)
};

export default Demo
`

移入展开菜单

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Cascader, Row } from 'uiw';

const Demo = () => {

const options = [
{
label: '上海市',
value: 1,
children: [
{
label: '徐汇区',
value: 4,
children: [
{ label: '半淞园路街道', value: 6 },
{ label: '南京东路街道', value: 7 },
{ label: '外滩街道', value: 8 },
]
},
]
},
{
label: '北京市',
value: 9,
children: [
{
label: '崇文区',
value: 12,
children: [
{ label: '东花市街道', value: 13 },
{ label: '体育馆路街道', value: 14 },
{ label: '前门街道', value: 15 },
]
},
]
},
];

return (

style={{ width:200 }}
expandTrigger="hover"
allowClear={true}
placeholder="请选择"
value={[1, 4, 7]}
option={options}
onChange={(value, seleteds) => console.log(value, seleteds)}
onSearch={true}
/>

)
};
export default Demo
`

$3

在

                    {JSON.stringify(state.current, null, 2)}