条件查询

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><Inputstyle={{ width: 120 }}placeholder="请输入姓名"onChange={onNameChang}value={form.name}></Input><Selectstyle={{ width: 120 }}placeholder="请选择性别"options={options}allowClear={true}value={form.sex}onChange={onSexChange}></Select><Selectstyle={{ 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><Tablecolumns={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
  }