# CascaderTree #### config 参数 | 说明 | 类型 | 默认值 |版本 ---|---|---|---|--- options？ | 初始化选择数据源 | initOptionsType[]|[] |1.0.0 onCreateInitOptions?| 创建初始化选择数据源 | ()=>cascaderOptionsItemType[]||1.0.0 propValue?| onChange返回的options的value属性|string|'value'|1.0.0 propName? | Checkbox用到的options的name属性|string|'name'|1.0.0 quickOptions? | 快捷选择options | quickOptionsType[]|[]|1.0.0 onCreateQuickOptions? | 创建快捷选择options |(options:cascaderOptionsItemType[])=>quickOptionsType[]||1.0.0 value?|当前选中的value(只使用一次恢复选中，非受控组件)|string[]||1.0.0 disabled?|是否禁止编辑|boolean|false|1.0.0 onChange?|数据改变的回调|(value:string[]) => void||1.0.0 ##### 补充说明 options 数据源，需要作为第一层的数据的pid 设置为 0 #### 类型 ```typescript type initOptionsType = { [propName:string]: any, id:string|number, pid:string|number } type quickOptionsType = { name:string, options:cascaderOptionsItemType[], index?:number, } interface cascaderOptionsItemType extends initOptionsType { [propName:string]: any, level: number, checked: boolean, indeterminate: boolean, parent: cascaderOptionsItemType|undefined, children: cascaderOptionsItemType[] } ``` #### example ```typescript /* options 和 onCreateInitOptions必须存在一个 否则默认为[] */ { var quickOptions = [{ name:'一线城市', options:[], },{ name:'新一线城市', options:[], },{ name:'二线城市', options:[], },{ name:'三线城市', options:[], },{ name:'四线城市', options:[], },{ name:'五线城市及以下', options:[], }] options.forEach(el => { const { cityLevel } =el switch(cityLevel){ case 0: return quickOptions[0].options.push(el) case 10: return quickOptions[1].options.push(el) case 20: return quickOptions[2].options.push(el) case 30: return quickOptions[3].options.push(el) case 40: return quickOptions[4].options.push(el) case 50: return quickOptions[5].options.push(el) } }); return quickOptions }} options={[ {id:1,pid:0,name:'test',value:1}, {id:2,pid:0,name:'test2',value:2}, {id:3,pid:1,name:'test3',value:3}, {id:4,pid:2,name:'test4',value:4}, ]} /> ``` # CascaderTreeSelect #### config 参数 | 说明 | 类型 | 默认值 |版本 ---|---|---|---|--- options？ | 初始化选择数据源 | initOptionsType[]|[] |1.0.0 onCreateInitOptions?| 创建初始化选择数据源 | ()=>cascaderOptionsItemType[]||1.0.0 propValue?| onChange返回的options的value属性|string|'value'|1.0.0 propName? | Checkbox用到的options的name属性|string|'name'|1.0.0 value?|当前选中的value(只使用一次恢复选中，非受控组件)|string[]||1.0.0 disabled?|是否禁止编辑|boolean|false|1.0.0 onChange?|数据改变的回调|(value:string[]) => void||1.0.0 selectProps| antd-Select组件的props| SelectProps | {}|1.0.0 #### 类型 ```typescript type initOptionsType = { [propName:string]: any, id:string|number, pid:string|number } interface cascaderOptionsItemType extends initOptionsType { [propName:string]: any, level: number, checked: boolean, indeterminate: boolean, parent: cascaderOptionsItemType|undefined, children: cascaderOptionsItemType[] } ``` #### example ```typescript /* options 和 onCreateInitOptions必须存在一个 否则默认为[] */ ``` # DoubleSelect #### config 参数 | 说明 | 类型 | 默认值 |版本 ---|---|---|---|--- options| 渲染的options参数|optionsType[]|[]|1.0.0 value?| 选择的值 |[(string \| Number),(string \| Number)]|[]|1.0.0 firstPlaceholder？| firstSelect的Placeholder，向前兼容保留属性|string|''|1.0.0 lastPlaceholder？| lastSelect的Placeholder，向前兼容保留属性|string|''|1.0.0 firstProps？| firstSelect的props: antd-Select组件的props| SelectProps | {}|1.0.0 lastProps？| lastSelect的props: antd-Select组件的props| SelectProps | {}|1.0.0 initCheck？| 初始化是否选中，默认选择options[0]| boolean |false|1.0.0 disabled?|是否禁止编辑|boolean|false|1.0.0 onChange?|数据改变的回调|(value:[string\|Number,string\|Number])=>void||1.0.0 #### 类型 ```typescript type optionsType = { name:string, value:string|Number, key?:string, parent?:optionsType, children?:optionsType[], } ``` #### example ```typescript /* const industryOptipns = res.data.map(item=>{ if(item.parentIndustryId !== '0'){ return false; } return { ...item, value:item.id, name:item.industryName, children: res.data.filter(i=>i.parentIndustryId === item.industryId).map( i=>{ return { ...i, value: i.id, name: i.industryName, parent:item, } }) } }).filter(e=>e) */ ``` # ScrollSelect ScrollSelectProps & SelectProps SelectProps : antd-Select组件的prop ScrollSelectProps 如下 #### config 参数 | 说明 | 类型 | 默认值 |版本 ---|---|---|---|--- loading?| 加载中 |boolean|false|1.0.0 fetchParams?| 请求的固定参数 |any | null |1.0.0 paramsPage？| 请求页码的字段key|string|'page'|1.0.0 paramsPageSize？| 请求页大小的字段key|string|'size'|1.0.0 onFetchOptions？| 请求options返回的回调 | Function | undefined |1.0.0 onPopupScroll？| options滚动到底的回调 | Function | undefined |1.0.0 onHandleFetchResult？| 自定义处理返回值 | (data:any)=>{data:any,totalSize:number,currentPage:number,pageSize:number} |undefined|1.0.0 disabled?|是否禁止编辑|boolean|false|1.0.0 onGetSearchFilterValue?| 是否过保存activeSearch返回的数据，在后续的fetchOptions中根据保存数据过滤重复的数据 |(value:any)=>string|number,|undefined|1.0.0 fetchOptionsApi?| 发起fetchOptions的请求 |(params:any) => Promise<{}>|undefined|1.0.0 noInitFetch? | constructor 不触发 fetchOptions | boolean | false | 3.1.0 #### 类型 ```typescript null ``` #### 主动方法 activeSearchOptions: (serachParams:any) => Promise function:<主动激活fetchOptionsApi,params设置为serachParams> example: **this.adProductSelectInstance.activeSearchOptions({search:ids.join(','),size:ids.length})** #### example ```typescript /* const dataOptions = [] */ this.adProductSelectInstance = ref} mode="multiple" showSearch allowClear fetchOptionsApi={API.fetchProductList} onFetchOptions={(option)=>{ this.setState({ dataOptions:option }) }} filterOption={false} defaultActiveFirstOption={false} placeholder="请选择广告产品" > { dataOptions.map( item=>{ return }) } ``` # MultiSelectTable #### config 参数 | 说明 | 类型 | 默认值 |版本 ---|---|---|---|--- value?| 选择的值 |[(string \| Number),(string \| Number)]|[]|1.0.0 onAdapter？| 根据value恢复选中的数据 |(timeMap:timeMapType,value)=>timeMapType|undefined|1.0.0 onChange？| 选中返回的回调值 |(selectMap)=>void|undefined|1.0.0 disabled?|是否禁止编辑|boolean|false|1.0.0 #### 类型 ```typescript type timeMapType = boolean[][] ``` #### example ```typescript { var newTimeMap = Tools.extend([], timeMap) Tools.map(timeBucket, (value, key) => { const index = parseInt(key) if (isNaN(index)) { return } value.forEach((item) => { newTimeMap[index - 1] = newTimeMap[index - 1].map((e, i) => { if (item * 2 === i) { return true } return e }) }) }) return newTimeMap }} > ``` # Sidebar #### config 参数 | 说明 | 类型 | 默认值 |版本 ---|---|---|---|--- title? | 标题 | string | JSX.Element | 无 | 1.0.0 logo? | logo | any | 无 | 1.0.0 data? | 菜单数据源树状结构 | any[]| 无 | 1.0.0 ifCollapsed? | Sider菜单是否收起 | boolean | 无 | 1.0.0 openKeys? | 当前展开的 SubMenu 菜单项 key 数组 | string[] | 无 | 1.0.0 selectedKeys? | 当前选中的菜单项 key 数组 | string[] | 无 | 1.0.0 siderProps? | Sider 组件的props | SiderProps | { width: 208, collapsedWidth: 50 } | 3.0.0 clickOpenWhoseAllChildren? | 点击哪一层级SubMenu菜单项时，希望其子SubMenu默认都展开 | number | 无 | 3.0.0 onOpenMenuByKey? | SubMenu 展开/关闭的回调 | (key: string[]) => any | 无 | 1.0.0 onClickMenuKey? | 点击 MenuItem 调用此函数 | (key: string) => any | 无 | 1.0.0 onUpdateCollapsed? | Sider 展开/收起的回调 | (collapsed: boolean) => any | 无 | 1.0.0 #### 类型 ```typescript type SiderProps = { width?: string | number; trigger?: string | React.ReactNode; collapsedWidth?: number; zeroWidthTriggerStyle?: object; [propName: string]: any; } ``` #### example ```typescript this.props.dispatch({ type: 'sidebar/openMenuByKey', payload: key, })} onClickMenuKey={(key) => this.props.dispatch({ type: 'sidebar/clickMenuKey', payload: key, })} onUpdateCollapsed={(collapsed) => this.props.dispatch({ type: 'sidebar/updateCollapsed', payload: collapsed, })} /> ```