前端使用react+antd请根据查询项是贷款主体、证件号表格表头有贷款主体、证件号、经营地址、借款额合同编号生成一份前端代码

以下是一个基本的前端代码示例，使用了React和Antd库，实现了查询和表格展示功能：

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

const { Search } = Input;

const columns = [
  {
    title: '贷款主体',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '证件号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '经营地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '借款额',
    dataIndex: 'amount',
    key: 'amount',
  },
  {
    title: '合同编号',
    dataIndex: 'contract',
    key: 'contract',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    id: '411111111111111111',
    address: 'New York',
    amount: 10000,
    contract: '20210001',
  },
  {
    key: '2',
    name: 'Jim Green',
    id: '422222222222222222',
    address: 'London',
    amount: 20000,
    contract: '20210002',
  },
  {
    key: '3',
    name: 'Joe Black',
    id: '433333333333333333',
    address: 'Sidney',
    amount: 30000,
    contract: '20210003',
  },
];

const LoanTable = () => {
  const [searchText, setSearchText] = useState('');
  const [searchColumn, setSearchColumn] = useState('name');
  const [filteredData, setFilteredData] = useState(data);

  const onSearch = (value) => {
    const filter = { [searchColumn]: value };
    const filtered = data.filter((item) =>
      item[searchColumn].toLowerCase().includes(value.toLowerCase())
    );
    setFilteredData(filtered);
    setSearchText(value);
  };

  const handleSearchColumnChange = (e) => {
    setSearchColumn(e.target.value);
  };

  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <Search
          placeholder="请输入查询内容"
          allowClear
          enterButton="查询"
          size="large"
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
          onSearch={onSearch}
        />
        <div style={{ marginTop: 16 }}>
          <span>查询项：</span>
          <select onChange={handleSearchColumnChange} value={searchColumn}>
            <option value="name">贷款主体</option>
            <option value="id">证件号</option>
          </select>
        </div>
      </div>
      <Table columns={columns} dataSource={filteredData} />
    </>
  );
};

export default LoanTable;

这段代码包含了以下功能：

• 使用Table组件展示数据，表头使用columns数组定义；
• 使用Search组件实现查询功能，查询项可通过下拉框选择；
• 查询结果通过useState保存并在表格中展示；
• 样式使用了Antd的默认样式，可以根据需求自定义。