Antd Select 根据多个值筛选

·  阅读 483

有个邮箱选择器既要根据邮箱+用户名组合条件筛选数据,然后选中数据回填用户名或者用户的邮箱

// 选项设置
const userEmailOpt = users => {
    return (
        Array.isArray(users) &&
        users.map(item => {
            return (
                <Option
                    value={item.email}
                    key={item.id}
                    name={item.name}
                    filter={`${item.name}${item.email}`}
                >{`${item.email}(${item.name})`}</Option>
            )
        })
    )
}
复制代码

具体使用, optionFilterProp筛选的设置的字段, 数据回填到select的字段 optionLabelProp

<Select
      allowClear
      mode="multiple"
      placeholder="群组成员(可多选)"
      optionLabelProp="value"
      optionFilterProp={'filter'}
      getPopupContainer={triggerNode =>
          triggerNode.parentNode
      }
  >
      {userEmailOpt(users)}
  </Select>
复制代码
分类:
阅读
标签: