react

条件查询

import { Input, Select, Table } from "antd";
import { PageResp, Student, StudentQueryForm } from "../model/Student";
import { ColumnsType, TablePaginationConfig } from "antd/es/table";
import { ChangeEvent, useEffect, useState } from "react";
import axios from "axios";
import R from "../model/R";
// 服务端分页
//从Select组件中解构出Option组件,以便使用Option组件时就不用写Select.前缀
const { Option } = Select;
export default function A5() {
  const [students, setStudents] = useState<Student[]>([]);
  const [loading, setLoading] = useState(true);
  // 代表查询条件的状态数据
  const [form, setForm] = useState<StudentQueryForm>({});
  const options = [
//label代表标题
    { label: "男", value: "男" },
    { label: "女", value: "女" },
  ];
  const [pagination, setPagination] = useState<TablePaginationConfig>({
    current: 1,
    pageSize: 5,
//显示可以选择每页分页显示数据的行数的下拉列表
    showSizeChanger: true,
//自定义下拉列表的每页分页显示数据的行数的选项
    pageSizeOptions: [1, 3, 7],
  });
  useEffect(() => {
    async function getStudents() {
      const resp = await axios.get<R<PageResp<Student>>>(
//会以这种请求格式 /api/students/q?name=&age=&page= 发送给服务器
        "http://localhost:8080/api/students/q",
        {
          params: {
            page: pagination.current,
            size: pagination.pageSize,
//展开运算符会以name:'xx',sex:'xx' ...方式展开
            ...form  // 补充查询参数
          },
        }
      );
      setStudents(resp.data.data.list);

      setPagination((old) => {
        // 服务端分页需要total属性
        return { ...old, total: resp.data.data.total };
      });
    }
    setLoading(false);
    getStudents();
    // 当页号和每页记录数改变了重新查询,当姓名、性别、年龄改变是会返回新的form对象重新查询数据
  }, [pagination.current, pagination.pageSize, form]);
//当分页条件改变时触发onChange事件执行onTableChange函数更新分页在状态数据重新查询
  function onTableChange(newPagination: TablePaginationConfig) {
    setPagination(newPagination);
  }
    // name 条件改变时处理函数,e代表Input输入名字时触发的事件
  function onNameChang(e: ChangeEvent<HTMLInputElement>) {
    setForm((old) => {
      return { ...old, name: e.target.value };
    });
  }
 // sex 条件改变时处理函数,value代表下列列表传入的值
  function onSexChange(value: string) {
    setForm((old) => {
      return { ...old, sex: value };
    });
  }
 // age 条件改变时处理函数,value代表下拉列表传入的值
  function onAgeChange(value: string) {
    setForm((old) => {
      return { ...old, age: value };
    });
  }
  const columns: ColumnsType<Student> = [
    { title: "编号", dataIndex: "id" },
    { title: "姓名", dataIndex: "name" },
    { title: "性别", dataIndex: "sex" },
    { title: "年龄", dataIndex: "age" },
  ];
  return (
    <div>
      <div>
        <Input
          style={{ width: 120 }}
          placeholder="请输入姓名"
          onChange={onNameChang}
          value={form.name}
        ></Input>
        <Select
          style={{ width: 120 }}
          placeholder="请选择性别"
          options={options}
          allowClear={true}
          value={form.sex}
          onChange={onSexChange}
        ></Select>
        <Select
          style={{ width: 120 }}
          placeholder="请选择年龄"
          allowClear={true}
          value={form.age}
          onChange={onAgeChange}
        >
 {/* "1,19"字符串会被后台Spring框架自动转化为整数数组传给服务器*/}
          <Option value="1,19">20以下</Option>
          <Option value="20,29">20左右</Option>
          <Option value="30,39">30左右</Option>
          <Option value="40,120">40以上</Option>
        </Select>
      </div>
      <Table
        columns={columns}
        dataSource={students}
        rowKey="id"
         // loading代表加载数据时有页面有正在加载的效果显示
        loading={loading}
        pagination={pagination}
        onChange={onTableChange}
      ></Table>
    </div>
  );
}

• 建议 axios 发请求是用 params 而不要自己拼字符串因为自己拼串需要去掉值为 undefined 的属性

• 其中 StudentQueryForm 为

• export interface StudentQueryForm {
    name?: string,
    sex?: string,
    age?: string,
    [key: string]: any
  }