全网react+飞冰（ice）UI框架组件实例（6）-Select实例

Select组件在项目用到多次，也用到了几种不同类型的用法，觉得在项目中也是比较常用的，在这里记录一下，希望对大家有帮助！

使用dataSource 下拉带搜索功能，多选，效果如下：

// 初使化数据
const DEFAULT_DATA = {
  tableData: {
    data: {
      list: [],
      pageNum: 1,
      total: 0,
      size: 0
    },
  },
};

定义字段
const { dataSource = DEFAULT_DATA } = props;
const [tableDatarole, settableDatarole] = useState(dataSource.tableData)

// html
<Form labelAlign="top" className={styles.baseSetting} value={addList} responsive>
    <FormItem label="所属角色" colSpan={6}>
        <Select mode="multiple" name="roleList" showSearch dataSource={tableDatarole.data.list} style={{ width: '100%' }}
          onChange={(val) => {
            setroleList(val)
          }}
          placeholder="所属角色" />
      </FormItem>
</Form>

//  请求
const pagerole = () => {
    request.get(`接口`, {
    }).then(function (response) {
      response.data.list.forEach(item => {
        // item.key = item.id
        item.label = item.name
        item.value = item.id
      });
      settableDatarole(response)
    }).catch(function (error) {
      common.NoticeError('数据获取', '数据获取失败', error)
    });
}

使用dataSource 下拉带搜索功能，单选，效果如下：

// 初使化数据
const DEFAULT_DATA = {
  tableData: {
    data: {
      list: [],
      pageNum: 1,
      total: 0,
      size: 0
    },
  },
};

定义字段
const { dataSource = DEFAULT_DATA } = props;
const [tableDatahome, settableDatahome] = useState(dataSource.tableData)

// html
<Form labelAlign="top" className={styles.baseSetting} value={addList} responsive>
    <FormItem label="跳转首页" colSpan={6}>
        <Select showSearch hasClear name='homefk' dataSource={tableDatahome.data.list} style={{ width: '100%' }} placeholder="跳转首页" />
    </FormItem>
</Form>

// 请求数据
  const pagesystemencodehome = () => {
    request.get(`接口`, {
    }).then(function (response) {
      response.data.list.forEach(item => {
        // item.key = item.id
        item.label = item.name
        item.value = item.id
      });
      settableDatahome(response)
    }).catch(function (error) {
      common.NoticeError('数据获取', '数据获取失败', error)
    });
  }