使用antd的Form+FormItem+Row+Col生成查询条件代码,每行2列:CREATE TABLE `ssr_primer_group` ( `pg_id` varchar(32) NOT NULL COMMENT '主键ID', `pg_name` varchar(64) DEFAULT NULL COMMENT '分组名', `pg_pr_code` varchar(64) DEFAULT NULL COMMENT '引物编号,如:P01,P02等', `pg_comment` varchar(512) DEFAULT NULL COMMENT '备注信息', `pg_order` int(11) DEFAULT NULL COMMENT '排序', `pg_primer_type` int(11) DEFAULT NULL COMMENT '引物类型:0-SSR/1-SNP', `pg_type` int(11) DEFAULT NULL COMMENT '引物组类型:0-系统默认,1-自定义', `pg_node_type` enum('DIR','DATA') DEFAULT NULL COMMENT '类型(DATA:数据,DIR 目录)', `pg_parent_id` varchar(32) DEFAULT NULL COMMENT '父节点ID', `pg_manager` varchar(32) DEFAULT NULL COMMENT '引物组负责人', `pg_species` varchar(32) DEFAULT NULL COMMENT '样品种属,如玉米,水稻等', `pg_is_used` int(4) DEFAULT NULL COMMENT '是否启用:0-未启用,1-启用', `pg_create_date` datetime DEFAULT NULL, `pg_update_date` datetime DEFAULT NULL, PRIMARY KEY (`pg_id`), KEY `SSR_PRIMER_GROUP_NAME_INDEX` (`pg_name`), KEY `PG_PARENT_ID` (`pg_parent_id`), CONSTRAINT `ssr_primer_group_ibfk_1` FOREIGN KEY (`pg_parent_id`) REFERENCES `ssr_primer_group` (`pg_id`) ON DELETE CASCADE ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='引物分组信息表'
时间: 2023-09-01 07:07:24 浏览: 100
使用form-create动态生成vue自定义组件和嵌套表单组件
5星 · 资源好评率100%
以下是生成的查询条件代码:
```jsx
import { Form, Row, Col, Input, Select } from 'antd';
const { Option } = Select;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 },
};
const AdvancedSearchForm = ({ form }) => {
const { getFieldDecorator } = form;
return (
<Form>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="分组名" {...formItemLayout}>
{getFieldDecorator('pg_name')(<Input placeholder="请输入分组名" />)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="引物编号" {...formItemLayout}>
{getFieldDecorator('pg_pr_code')(<Input placeholder="请输入引物编号" />)}
</Form.Item>
</Col>
</Row>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="引物类型" {...formItemLayout}>
{getFieldDecorator('pg_primer_type')(
<Select placeholder="请选择引物类型">
<Option value={0}>SSR</Option>
<Option value={1}>SNP</Option>
</Select>
)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="是否启用" {...formItemLayout}>
{getFieldDecorator('pg_is_used')(
<Select placeholder="请选择是否启用">
<Option value={0}>未启用</Option>
<Option value={1}>启用</Option>
</Select>
)}
</Form.Item>
</Col>
</Row>
</Form>
);
};
export default Form.create()(AdvancedSearchForm);
```
以上代码使用 `antd` 中的 `Form`、`FormItem`、`Row`、`Col`、`Input` 和 `Select` 组件生成了一个包含四个查询条件的表单。其中,每行有两个查询条件,分别是分组名、引物编号、引物类型和是否启用。引物类型和是否启用使用了 `Select` 组件,可以选择对应的选项。
阅读全文