Element Plus实现分页查询

1、页面

<script setup="">
import { ref, onMounted, watch } from "vue";
import { queryAllApi, queryPageApi } from "@/api/emp";// 搜索表单对象
const searchEmp = ref({name: "",gender: "",date: [],begin: "",end: "",
});// 侦听serchEmp的data属性
watch(() => searchEmp.value.date,(newVal, oldVal) => {if (newVal.length == 2) {searchEmp.value.begin = newVal[0];searchEmp.value.end = newVal[1];} else {searchEmp.value.begin = "";searchEmp.value.end = "";}}
);// 员工列表数据
let empList = ref([]);// 查询员工列表
let search = async () => {let result = await queryPageApi(searchEmp.value.name,searchEmp.value.gender,searchEmp.value.begin,searchEmp.value.end,currentPage.value,pageSize.value);if (result.code) {empList.value = result.data.rows;total.value = result.data.total;}console.log(result.data.rows);
};//清空
const clear = () => {searchEmp.value = { name: "", gender: "", date: [], begin: "", end: "" };search();
};// 分页
const currentPage = ref(1); // 页码
const pageSize = ref(5); // 每页显示的记录数
const background = ref(true); // 是否背景颜色
const total = ref(0); // 总记录数
// 每页展示记录数发生变化
const handleSizeChange = (val) => {search();console.log(`每页展示${val} 条记录`);
};
// 页码变化时触发
const handleCurrentChange = (val) => {search();console.log(`当前页码 ：${val}`);
};onMounted(() => {search();
});
</script><template><h1>员工管理</h1>{{ searchEmp }}<!--  搜索框--><div class="container"><el-form :inline="true" :model="searchEmp" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchEmp.name" placeholder="请输入员工姓名" /></el-form-item><el-form-item label="性别"><el-select v-model="searchEmp.gender" placeholder="请选择"><el-option label="男" value="1" /><el-option label="女" value="2" /></el-select></el-form-item><el-form-item label="入职日期"><el-date-pickerv-model="searchEmp.date"type="daterange"range-separator="到"start-placeholder="开始日期"end-placeholder="结束日期"value-format="YYYY-MM-DD"/></el-form-item><el-form-item><el-button type="primary" @click="search">查询</el-button><el-button type="info" @click="clear">清空</el-button></el-form-item></el-form></div><!--  按钮--><div class="container"><el-button type="primary" @click="search">+新增员工</el-button><el-button type="danger" @click="clear">-批量删除</el-button></div><!--  表格--><div class="container"><el-table :data="empList" border style="width: 100%"><el-table-column type="selection" width="55" align="center" /><el-table-column prop="name" label="姓名" width="180" align="center" /><el-table-column prop="gender" label="性别" width="180" align="center"><template #default="scope"><span v-if="scope.row.gender == 1">男</span><span v-else>女</span></template></el-table-column><el-table-column prop="image" label="头像" align="center"><template #default="scope"><img :src="scope.row.image" height="40px" /></template></el-table-column><el-table-column prop="deptName" label="所属部门" align="center" /><el-table-column prop="job" label="职位" align="center"><template #default="scope"><span v-if="scope.row.job == 1">班主任</span><span v-else-if="scope.row.job == 2">讲师</span><span v-else-if="scope.row.job == 3">学工主管</span><span v-else-if="scope.row.job == 4">教研主管</span><span v-else-if="scope.row.job == 5">咨询师</span><span v-else>其他</span></template></el-table-column><el-table-column prop="entryDate" label="入职日期" align="center" /><el-table-column prop="updateTime" label="最后操作时间" align="center" /><el-table-column label="操作" align="center"><template #default="scope"><el-button type="primary" size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon>编辑</el-button><el-button type="danger" size="small" @click="delById(scope.row.id)"><el-icon><Delete /></el-icon>删除</el-button></template></el-table-column></el-table></div><!--  分页--><div class="container"><el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[5, 10, 20, 30, 50, 75, 100]":background="background"layout="total, sizes, prev, pager, next, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template><style scoped>
.container {margin: 10px;
}
</style>

2、请求API

import request from "../utils/request";//查询员工列表数据
export const queryAllApi = () => {return request.get("/emps");
};
1;export const queryPageApi = (name, gender, begin, end, page, pageSize) =>request.get(`/emps?name=${name}&gender=${gender}&begin=${begin}&end=${end}&page=${page}&pageSize=${pageSize}`);