antd select 遇到的问题综合

part1: select 下拉内容显示不全

需求：

• 用antd 做了一个select 的下拉
• 使用的参数是 style={{width: '200px'}}
• 但是存在 宽度过宽的情况超出部分antd自动将字符串缩略使用 ... 代替
• 期望全显示

过程

• 翻文档文档说使用 dropdownStyle 可以修改下拉菜单的属性，呵呵 毛用没有，不知道为啥就是会有一个 width 属性是强制赋值的，就算是删除了上面的 style 也没用
• google 查询为什么dropdownstype 无效查到了后面这个，也没啥用  https://github.com/ant-design/ant-design/issues/6624#issuecomment-374851334
• 使用 dropdownClassName 强制修改css

.autoWidth{
  width: auto !important;
}

总结：

• 内心的os 只能说给自己听

求助

• 有没有晓得的小伙伴= =，为什么会不行求教

part2：select 异步加载数据显示缺失

需求：

• 开始的时候antd select 这个下拉并不是异步的，但是可以进行filter 内容
• 改成用异步获取 下拉信息的功能

过程：

• 查文档需要用到 onSearch，onSearch 会获取输入的字符串并通过这个字符串进行新数据的查询
• 失败

  <Select
            onSelect={this.onChange}
            onSearch={this.getSpeciesByName}
            showSearch
            style={{ width: '100%' }}
            optionFilterProp="children"
          >
      <Option>test</Option>
  </Select>

   

 

• 最开始的时候输入一个字符是好的，但是输入多了就变了
• 查看异步请求出来的数据并没有问题
• 猜测是被过滤掉了，而过滤条件只有 optionFilterProp="children"
• 删除对应的条件，还是失败

  <Select
            onSelect={this.onChange}
            onSearch={this.getSpeciesByName}
            showSearch
            style={{ width: '100%' }}
          >
      <Option>test</Option>
  </Select>

   

• 查看文档发现筛选默认会根据Option 的value 进行筛选

• 修改筛选规则 filterOption，成功

• <Select
            onSelect={this.onChange}
            onSearch={this.getSpeciesByName}
            showSearch
            style={{ width: '100%' }}
            filterOption={(input, option) => {
                return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }}
          >
      <Option>test</Option>
  </Select>

   

总结：

• optionFilterProp 的filter 看起来是存在缓存的，不能和异步请求数据一起使用
• 在异步请求之后还需要对展示的数据做一个filter 的过滤需要使用  filterOption