• 基础样例
• 可展开和收起

TagSelect标签选择器

可进行多选，带折叠收起和展开更多功能，常用于对列表进行筛选。

引用方式：

import TagSelect from 'ant-design-pro/lib/TagSelect';

详细使用方式请参照：独立使用 pro 组件

代码演示

基础样例

结合 Tag 的 TagSelect 组件，方便的应用于筛选类目的业务场景中。

import TagSelect from 'ant-design-pro/lib/TagSelect';
function handleFormSubmit(checkedValue) {
  console.log(checkedValue);
}
ReactDOM.render(
  <TagSelect onChange={handleFormSubmit}>
    <TagSelect.Option value="cat1">类目一</TagSelect.Option>
    <TagSelect.Option value="cat2">类目二</TagSelect.Option>
    <TagSelect.Option value="cat3">类目三</TagSelect.Option>
    <TagSelect.Option value="cat4">类目四</TagSelect.Option>
    <TagSelect.Option value="cat5">类目五</TagSelect.Option>
    <TagSelect.Option value="cat6">类目六</TagSelect.Option>
  </TagSelect>
, mountNode);

可展开和收起

使用 expandable 属性，让标签组可以收起，避免过高。

import TagSelect from 'ant-design-pro/lib/TagSelect';
function handleFormSubmit(checkedValue) {
  console.log(checkedValue);
}
ReactDOM.render(
  <TagSelect onChange={handleFormSubmit} expandable>
    <TagSelect.Option value="cat1">类目一</TagSelect.Option>
    <TagSelect.Option value="cat2">类目二</TagSelect.Option>
    <TagSelect.Option value="cat3">类目三</TagSelect.Option>
    <TagSelect.Option value="cat4">类目四</TagSelect.Option>
    <TagSelect.Option value="cat5">类目五</TagSelect.Option>
    <TagSelect.Option value="cat6">类目六</TagSelect.Option>
    <TagSelect.Option value="cat7">类目七</TagSelect.Option>
    <TagSelect.Option value="cat8">类目八</TagSelect.Option>
    <TagSelect.Option value="cat9">类目九</TagSelect.Option>
    <TagSelect.Option value="cat10">类目十</TagSelect.Option>
    <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
    <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
  </TagSelect>
, mountNode);

API

TagSelect

TagSelectOption