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

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

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

antd Select 选择器组件响应式多选实现 JavaScript 第1张

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

解决方法:

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

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

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

antd Select 选择器组件响应式多选实现 JavaScript 第2张

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

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 选择器组件响应式多选实现

赞 (2)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)