--- order: 3 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. ```jsx import { Form, Row, Col, Input, Button, Icon } from 'antd'; class AdvancedSearchForm extends React.Component { state = { expand: false, }; // To generate mock Form.Item getFields() { const count = this.state.expand ? 10 : 6; const { getFieldDecorator } = this.props.form; const children = []; for (let i = 0; i < 10; i++) { children.push( {getFieldDecorator(`field-${i}`, { rules: [ { required: true, message: 'Input something!', }, ], })()} , ); } return children; } handleSearch = e => { e.preventDefault(); this.props.form.validateFields((err, values) => { console.log('Received values of form: ', values); }); }; handleReset = () => { this.props.form.resetFields(); }; toggle = () => { const { expand } = this.state; this.setState({ expand: !expand }); }; render() { return (
{this.getFields()} Collapse
); } } const WrappedAdvancedSearchForm = Form.create({ name: 'advanced_search' })(AdvancedSearchForm); ReactDOM.render(
Search Result List
, 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; } ```