antd Select 选择器组件响应式多选实现

要实现一个功能，选择汇总时自动取消中心，选则中心，自动取消汇总，中心是可以多选的。

因为要兼容深色皮肤，考虑使用在 antd 的 Select 二开过的组件。

现在的问题是，选择框的宽度直接窄，多选时不能优雅的显示 tags 。

解决方法：

Select 组件有一个 maxTagCount 属性，可以设置最多显示多少个 tag ，支持 Number （个数）和 responsive （响应式）。

注意：响应式模式会对性能产生损耗。

这样，如果显示不可是就会显示这样， +3...

这肯定不是我想要的，显示不开的文字是可以自定义的。

maxTagPlaceholder 属性可以定义隐藏 tag 时显示的内容。

代码示例：

const value = [
  {
    label: '汇总',
    value: 0,
  },
  {
    label: '西安',
    value: 1,
  },
  {
    label: '大庆',
    value: 2,
  },
  {
    label: '成都',
    value: 3,
  },
];
<Select value={value} mode="multiple" maxTagCount="responsive" maxTagPlaceholder="多选" />

未经允许不得转载：w3h5 » antd Select 选择器组件响应式多选实现