# SelectGroup 平铺筛选

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/select-group/freepass)
- 平台：PC
- 维护者：蒋贝贝
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys-2/#s17
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[SelectGroup]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from "react";
import { AnyObj, SelectGroup, SelectGroupDatas } from "@weapp/ui";

export default class SelectGroupDemo extends React.Component<any, any> {
  datas: SelectGroupDatas = [
    {
      id: 'level',
      content: '层级:',
      options: [
        { id: 'all', content: '全部' },
        { id: 'company_level', content: '公司级' },
        { id: 'department_level', content: '部门级' },
        { id: 'person_level', content: '个人级' },
      ],
    },
    {
      id: 'business',
      content: '行业:',
      options: [
        { id: 'all', content: '全部' },
        { id: 'internet', content: '互联网' },
        { id: 'education', content: '教育' },
        { id: 'manufacturing', content: '制造业' },
        { id: 'estate', content: '地产' },
        { id: 'medicine', content: '医药' },
        { id: 'finance', content: '金融' },
        { id: 'goverment', content: '政府' },
        { id: 'life_service', content: '生活服务' },
        { id: 'engine', content: '能源' },
        { id: 'other', content: '其他' },
      ],
    },
    {
      id: 'function',
      content: '职能:',
      options: [
        { id: 'all', content: '全部' },
        { id: 'market', content: '市场' },
        { id: 'sales', content: '销售' },
      ],
    },
  ]
  constructor(props: any) {
    super(props);
    this.state = {
      value: {
        level: ['all'],
        business: ['all'],
        function: ['all'],
      },
    }
  }
  onChange = (value: AnyObj, datas: AnyObj) => {
    console.log(value, datas);
    this.setState({ value });
  }
  render() {
    const { value } = this.state;
    return (<>
      <SelectGroup datas={this.datas} value={value} onChange={this.onChange} />
    </>)
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| datas | 条件组配置 | SelectGroupDatas | 是 |  |
| isSingle | 单选 | boolean | 否 |  |
| leftWidth | 左侧标签宽度 | number | 否 |  |
| leftSpan | 左侧标签宽度比例 | number | 否 |  |
| value | 默认值 | AnyObj | 否 |  |
| onChange | 选中值改变回调 | (value: AnyObj, datas: AnyObj) => void | 否 |  |
### SelectGroupDatas 类型具体说明

```
type SelectGroupDatas = Array<SelectGroupData>;

interface SelectGroupData extends DataType {
  /* 选项值 */
  options: Array<DataType>;
}
```

### datas、value、onChange返回值案例说明

```
一、datas例子：
[
  {
    id: 'level', // 主键值
    content: '层级:', // 条件名称
    options: [ // 条件选项
      { id: 'all', content: '全部' },
      { id: 'company_level', content: '公司级' },
      { id: 'department_level', content: '部门级' },
      { id: 'person_level', content: '个人级' },
    ],
  }
]

二、value例子
{
  level: ['all'], // level对应datas的id, all对应options内的id
  business: ['all'],
  function: ['all'],
}
三、onChange返回值
1. onChange返回值value同二
2. onChange返回值data格式如下：
{
  level: [{ id: 'all', content: '全部' }], // level对应datas的id, all对应options内的数据
  business: [{ id: 'all', content: '全部' }],
  function: [{ id: 'all', content: '全部' }],
}
```

### leftWidth及leftSpan使用说明

```
1.左侧标签默认100px
2.通过设置leftWidth可调整左侧标签宽度
3.通过设置leftSpan，调整为栅格布局
```
