react制作查询表格

要制作一个查询表格，可以使用 React 和 Ant Design 的组件库来实现。下面是一个简单的示例：

首先，需要安装 Ant Design 和相关的依赖：

npm install antd --save
npm install axios --save

接着，创建一个组件 `QueryTable`，它包含一个查询表单和一个数据表格：

import React, { useState } from 'react';
import { Table, Form, Input, Button, Space } from 'antd';
import axios from 'axios';

const QueryTable = () => {
  const [form] = Form.useForm();
  const [dataSource, setDataSource] = useState([]);

  const onFinish = (values) => {
    axios.get('/api/data', { params: values })
      .then((response) => {
        setDataSource(response.data);
      });
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  return (
    <div>
      <Form form={form} onFinish={onFinish}>
        <Space>
          <Form.Item name="name">
            <Input placeholder="Name" />
          </Form.Item>
          <Form.Item name="age">
            <Input placeholder="Age" />
          </Form.Item>
          <Form.Item name="address">
            <Input placeholder="Address" />
          </Form.Item>
          <Button type="primary" htmlType="submit">
            Search
          </Button>
        </Space>
      </Form>
      <Table dataSource={dataSource} columns={columns} />
    </div>
  );
};

export default QueryTable;

在上面的代码中，使用了 Ant Design 的 `Table`、`Form`、`Input` 和 `Button` 组件。查询表单和数据表格都是通过这些组件来实现的。

在 `onFinish` 函数中，使用 `axios` 库向后台发送查询请求，并更新数据源 `dataSource`。查询结果会通过 `dataSource` 渲染到数据表格中。

最后，将 `QueryTable` 组件渲染到页面中即可：

import React from 'react';
import ReactDOM from 'react-dom';
import QueryTable from './QueryTable';

ReactDOM.render(<QueryTable />, document.getElementById('root'));

在这个示例中，假设后台提供了一个 `/api/data` 接口，参数为查询条件，返回值为查询结果。可以根据实际情况修改这部分代码。