条件查询
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 }