ant 下拉菜单实现可以搜索

最新推荐文章于 2024-10-10 11:03:41 发布

huoyueyi

最新推荐文章于 2024-10-10 11:03:41 发布

阅读量646

点赞数 9

文章标签：前端 anti-design-vue react.js

本文链接：https://blog.csdn.net/kyrie_mvp/article/details/136536882

版权

要在下拉菜单中实现可以搜索 , 这是目前样式

发现直接加showSearch和optionFilterProp就可以了 !

           <Form.Item label='书籍名称'>
              <Select
                showSearch //下拉框出现搜素,并可以输入
                optionFilterProp='children' // 使搜索匹配子节点的文本内容
                value={filterObj.book_id}
                onChange={(ev) => handleFilter('book_id', ev)}
                placeholder='请选择书籍名称'
                autoComplete='off'
                style={{ width: 160 }}
                id='name'
              >
                {books &&
                  books.map((item) => (
                    <Select.Option value={item.id} key={item.id}>
                      {item.name}
                    </Select.Option>
                  ))}
              </Select>
            </Form.Item>