mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 08:09:13 +08:00
4cdf37bedb
* init form * first demo * add normal login * add style * webit * support nest errors * beauti form errors * use onReset * modal demo * add list demo * match key of errors logic * date demo * customize component * moving style * add status style * without form create * add demos * add inline style * clean up legacy * fix drawer demo * mention * fix edit-row * editable table cell * update mentions demo * fix some test case * fix upload test * fix lint * part of doc * fix ts * doc update * rm react 15 * rm config * enhance test coverage * clean up * fix FormItem context pass logic * add more demo * en to build * update demo * update demo & snapshot * more doc * update list doc * update doc * update demo to display condition render * update snapshot * add provider doc * support configProvider * more doc about validateMessages * more description * more and more doc * fix typo * en doc * Form.List doc * m v3 -> v4 * add skip
130 lines
2.8 KiB
Markdown
130 lines
2.8 KiB
Markdown
---
|
|
order: 13
|
|
title:
|
|
zh-CN: 高级搜索
|
|
en-US: Advanced search
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
三列栅格式的表单排列方式，常用于数据表格的高级搜索。
|
|
|
|
有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
|
|
|
|
## en-US
|
|
|
|
Three columns layout is often used for advanced searching of data table.
|
|
|
|
Because the width of label is not fixed, you may need to adjust it by customizing its style.
|
|
|
|
```tsx
|
|
import { Form, Row, Col, Input, Button, Icon } from 'antd';
|
|
|
|
const AdvancedSearchForm = () => {
|
|
const [expand, setExpand] = React.useState(false);
|
|
const [form] = Form.useForm();
|
|
|
|
const getFields = () => {
|
|
const count = expand ? 10 : 6;
|
|
const children = [];
|
|
for (let i = 0; i < count; i++) {
|
|
children.push(
|
|
<Col span={8} key={i}>
|
|
<Form.Item
|
|
name={`field-${i}`}
|
|
label={`Field ${i}`}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Input something!',
|
|
},
|
|
]}
|
|
>
|
|
<Input placeholder="placeholder" />
|
|
</Form.Item>
|
|
</Col>,
|
|
);
|
|
}
|
|
return children;
|
|
};
|
|
|
|
const onFinish = values => {
|
|
console.log('Received values of form: ', values);
|
|
};
|
|
|
|
return (
|
|
<Form
|
|
form={form}
|
|
name="advanced_search"
|
|
className="ant-advanced-search-form"
|
|
onFinish={onFinish}
|
|
>
|
|
<Row gutter={24}>{getFields()}</Row>
|
|
<Row>
|
|
<Col span={24} style={{ textAlign: 'right' }}>
|
|
<Button type="primary" htmlType="submit">
|
|
Search
|
|
</Button>
|
|
<Button
|
|
style={{ marginLeft: 8 }}
|
|
onClick={() => {
|
|
form.resetFields();
|
|
}}
|
|
>
|
|
Clear
|
|
</Button>
|
|
<a
|
|
style={{ marginLeft: 8, fontSize: 12 }}
|
|
onClick={() => {
|
|
setExpand(!expand);
|
|
}}
|
|
>
|
|
Collapse <Icon type={expand ? 'up' : 'down'} />
|
|
</a>
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(
|
|
<div>
|
|
<AdvancedSearchForm />
|
|
<div className="search-result-list">Search Result List</div>
|
|
</div>,
|
|
mountNode,
|
|
);
|
|
```
|
|
|
|
```css
|
|
.ant-advanced-search-form {
|
|
padding: 24px;
|
|
background: #fbfbfb;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.ant-advanced-search-form .ant-form-item {
|
|
display: flex;
|
|
}
|
|
|
|
.ant-advanced-search-form .ant-form-item-control-wrapper {
|
|
flex: 1;
|
|
}
|
|
```
|
|
|
|
<style>
|
|
#components-form-demo-advanced-search .ant-form {
|
|
max-width: none;
|
|
}
|
|
#components-form-demo-advanced-search .search-result-list {
|
|
margin-top: 16px;
|
|
border: 1px dashed #e9e9e9;
|
|
border-radius: 6px;
|
|
background-color: #fafafa;
|
|
min-height: 200px;
|
|
text-align: center;
|
|
padding-top: 80px;
|
|
}
|
|
</style>
|