# MultiCascader
## MultiCascaderPanel
#### config
参数 | 说明 | 类型 | 默认值 |版本
---|---|---|---|---
options | 初始化选择数据源，tree | OptionType[] | | v2.0.4-beta.3
value? | 选中的值，一般纯面板 MultiCascaderPanel 传这个，推荐 |  (string | number)[] | | v2.0.4-beta.3
selectedMap? | 选中的值，一般 MultiCascaderSelect 也可传这个  | OptionType[] | | v2.0.4-beta.3
disabled? | 是否禁止编辑 | boolean | | v2.0.4-beta.3
propValue? | onChange返回的 options 的 value 属性 | string | | v2.0.4-beta.3
propName? | Checkbox用到的 options 的 name 属性 | string | | v2.0.4-beta.3
onChange? | 数据改变的回调, 入参的是数组对象 |  (selectedMap: OptionType[]) => void,| | v2.0.4-beta.3
showCheckedStrategy? | 定制回填方式  | 'SHOW_PARENT' 当父节点的子节点都选中时，回填父节点(父节点：cheked：true  / 'SHOW_CHILD' 回填最底层节点/ 'SHOW_ALL' 回填所有选中的节点 | 默认 SHOW_PARENT | v2.0.4-beta.3

#### 类型
```typescript
type OptionType = {
    value: string | number,
    name?: string,
    fullName?: (string)[], // 该层级参数的 全部层级
    leaf: number, // 从 0 开始
    parent?: OptionType,
    children?: OptionType[],
    checked: boolean,
    indeterminate: boolean, // 我们这一版只考虑父子节点有关联的，即 indeterminate 为 fasle 的，且此时 showCheckedStrategy 最好设置为 SHOW_ALL
    [propName: string]: any,
};
```
#### example
```typescript
<MultiCascaderPanel 
    value = [1]
    options = {[
            {
                name: 'test1', 
                value: 1,
                fullName: ['test1'],
                leaf: 0,
                checked: true,
                indeterminate: false,
                parent: null,
                children: [
                    { name: 'test2', value: 2, fullName: ['test1', 'test2'], leaf: 1, checked: true, indeterminate: false, parent: {name: 'test1', value: 1, ...}, children: null },
                    { name: 'test3', value: 3, fullName: ['test1', 'test3'], leaf: 1, checked: true, indeterminate: false, parent: {name: 'test1', value: 1, ...}, children: null },
                ],
            },
        ]}
    /> 
/>
```

## MultiCascaderSelect
#### config
参数 | 说明 | 类型 | 默认值 |版本
---|---|---|---|---
options? | 初始化选择数据源，tree，options 与 optionsFlat二选一 | OptionType[] | | v2.0.4-beta.3
optionsFlat? | 最简单的二维数组：需要[propPValue]/[propValue]/[propName] -- 推荐 |  OptionType[] | | v2.0.4-beta.3
value? | 选中的值 |  (string | number)[] | | v2.0.4-beta.3
disabled? | 是否禁止编辑 | boolean | | v2.0.4-beta.3
keyValue? | 包含 父级属性名 propPValue，onChange 返回的 value 的属性名 propValue，Checkbox用到的name 的属性名 propName | PropsKeyValue | | v2.0.4-beta.3
onChange? | 数据改变的回调 |  (values: string[] | number[]) => void,| | v2.0.4-beta.3
showCheckedStrategy? | 定制回填方式  | 'SHOW_PARENT' 当父节点的子节点都选中时，回填父节点(父节点：cheked：true  / 'SHOW_CHILD' 回填最底层节点/ 'SHOW_ALL' 回填所有选中的节点 | 默认 SHOW_PARENT | v2.0.4-beta.3
showCheckedFormat? | 在 select 选中框中展示的格式 |  'ALL' 展示fullName 的拼接 / 'SELF' 展示当层的[propName] | SELF | v2.0.4-beta.3
showSearchFormat? | 在 select search 下拉展示面板里展示的格式 |  'ALL' 展示fullName 的拼接 / 'SELF' 展示当层的[propName] | SELF | v2.0.4-beta.3
selectProps? |  select 中除了排除掉上述的其他属性，以及labelInValue |  { [propsName: string]: any } | | v2.0.4-beta.3

#### 类型
```typescript
type OptionType = {
    value: string | number,
    name?: string,
    fullName?: (string)[],
    leaf: number, // 从 0 开始
    parent?: OptionType,
    children?: OptionType[],
    checked: boolean,
    indeterminate: boolean,
};

type PropsKeyValue = {
    propPValue: string,
    propValue: string,
    propName: string,
}
```
#### example
```typescript
<MultiCascaderSelect 
    value = [1]
    optionsFlat = {[
            {
                name: 'test1', 
                value: 1,
                fullName: ['test1'],
                leaf: 0,
                checked: true,
                indeterminate: false,
                parent: null,
                children: [
                    { name: 'test2', value: 2, fullName: ['test1', 'test2'], leaf: 1, checked: true, indeterminate: false, parent: {name: 'test1', value: 1, ...}, children: null },
                    { name: 'test3', value: 3, fullName: ['test1', 'test3'], leaf: 1, checked: true, indeterminate: false, parent: {name: 'test1', value: 1, ...}, children: null },
                ],
            },
        ]}
    /> 
/>

<MultiCascaderSelect 
    value = [1]
    options = {[
            {
                name: 'test1', 
                value: 1,
                pValue: null,
            },
            {
                name: 'test2', 
                value: 2,
                pValue: 1,
            },
            {
                name: 'test3', 
                value: 3,
                pValue: 1,
            },
        ]}
    /> 
/>
```

## MultiCascaderCard
#### config
参数 | 说明 | 类型 | 默认值 |版本
---|---|---|---|---
options? | 初始化选择数据源，tree，options 与 optionsFlat二选一 | OptionType[] | | v2.0.4-beta.3
optionsFlat? | 最简单的二维数组：需要[propPValue]/[propValue]/[propName] -- 推荐 |  OptionType[] | | v2.0.4-beta.3
value? | 选中的值 |  (string | number)[] | | v2.0.4-beta.3
disabled? | 是否禁止编辑 | boolean | | v2.0.4-beta.3
keyValue? | 包含 父级属性名 propPValue，onChange 返回的 value 的属性名 propValue，Checkbox用到的name 的属性名 propName | PropsKeyValue | | v2.0.4-beta.3
onChange? | 数据改变的回调 |  (values: string[] | number[]) => void,| | v2.0.4-beta.3
showCheckedStrategy? | 定制回填方式  | 'SHOW_PARENT' 当父节点的子节点都选中时，回填父节点(父节点：cheked：true  / 'SHOW_CHILD' 回填最底层节点/ 'SHOW_ALL' 回填所有选中的节点 | 默认 SHOW_PARENT | v2.0.4-beta.3
showCheckedFormat? | 在 select 选中框中展示的格式 |  'ALL' 展示fullName 的拼接 / 'SELF' 展示当层的[propName] | SELF | v2.0.4-beta.3
showSearch? | 是否支持选项搜索 | boolean | false | v2.0.4-beta.3
searchProps? | 搜索的属性，同 AutoComplete，但建议排除已使用的部分属性 | { [propName: string]: any } | | v2.0.4-beta.3
showSearchFormat? | 在 select search 下拉展示面板里展示的格式 |  'ALL' 展示fullName 的拼接 / 'SELF' 展示当层的[propName] | SELF | v2.0.4-beta.3
onCreateQuickOptions? | 创建快捷选择options |  (options: OptionType[]) => quickOptionsType[] | | v2.0.4-beta.3

##### 补充说明
options 数据源，需要作为第一层的数据的pid 设置为 0 

#### 类型
```typescript
type OptionType = {
    value: string | number,
    name?: string,
    fullName?: (string)[],
    leaf: number, // 从 0 开始
    parent?: OptionType,
    children?: OptionType[],
    checked: boolean,
    indeterminate: boolean,
};

type quickOptionsType = {
    value: string | number,
    name: string,
    options: OptionType[],
    index?: number,
    checked?: boolean,
    indeterminate?: boolean,
}

type PropsKeyValue = {
    propPValue: string,
    propValue: string,
    propName: string,
}
```
#### example
```typescript
<MultiCascaderSelect 
    value = [1]
    optionsFlat = {[
            {
                name: 'test1', 
                value: 1,
                fullName: ['test1'],
                leaf: 0,
                checked: true,
                indeterminate: false,
                parent: null,
                children: [
                    { name: 'test2', value: 2, fullName: ['test1', 'test2'], leaf: 1, checked: true, indeterminate: false, parent: {name: 'test1', value: 1, ...}, children: null },
                    { name: 'test3', value: 3, fullName: ['test1', 'test3'], leaf: 1, checked: true, indeterminate: false, parent: {name: 'test1', value: 1, ...}, children: null },
                ],
            },
        ]}
    /> 
/>

<MultiCascaderSelect 
    value = [1]
    onCreateQuickOptions={(options)=>{
        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 = {[
            {
                name: 'test1', 
                value: 1,
                pValue: null,
            },
            {
                name: 'test2', 
                value: 2,
                pValue: 1,
            },
            {
                name: 'test3', 
                value: 3,
                pValue: 1,
            },
        ]}
    /> 
/>
```