学生管理系统 - 学生信息查询

<template>
    <el-pagination
            @size-change='handleSizeChange'
            @current-change='handleCurrentChange'
            :current-page='currentPage'
            :page-sizes='[10, 20, 30, 40]'
            :page-size='pageSize'
            layout='sizes, prev, pager, next, jumper'
            :total='total'
    />
    <el-form ref='formRef' :inline='true' :model='formInline' class='demo-form-inline'>
        <el-form-item label='姓名' >
            <el-input v-model='formInline.sname'  style='border: solid black 1px;' clearable />
        </el-form-item>
        <el-form-item label='院名'>
            <el-input v-model='formInline.departmentName' style='border: solid black 1px;' clearable />
        </el-form-item>
        <el-form-item label='班级名称' >
            <el-input v-model='formInline.className' style='border: solid black 1px;' clearable />
        </el-form-item>
        <el-form-item>
            <el-button type='primary' @click='handleClick(formRef)'>Query</el-button>
        </el-form-item>
    </el-form>
    <el-table :data='Date1' style='width: 400%' height='600'>
        <el-table-column fixed prop='sid' label='学号' width='80' />
        <el-table-column prop='sname' label='学生姓名' width='80' />
        <el-table-column prop='spassword' label='学生密码' width='150' />
        <el-table-column prop='identification' label='身份证' width='80' />
        <el-table-column prop='age' label='年龄' width='80' />
        <el-table-column prop='sex' label='性别' width='80' />
        <el-table-column prop='departmentName' label='所属院系' width='90' />
        <el-table-column prop='className' label='班级名称' width='80' />
        <el-table-column prop='address' label='地址' width='80' />
        <el-table-column prop='phone' label='电话号码' width='150' />
        <el-table-column label='操作' width='80'>
            <template #default='scope'>
                <el-button style='font-weight: bold;' size='small' type='success' :icon=''Delete''
                 @click='handleDelete(scope.$index, scope.row)'>删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script lang='ts' setup>

    const currentPage = ref(1); // 当前页码
    const pageSize = ref(5); // 每页显示的条数
    const total = ref(0); // 总条数

    const initialized = ref(false);// 初始化标志位

    // 监听页码改变事件
    const handleCurrentChange = (val) => {
        currentPage.value = val;
        fetchData();
    };

    // 监听每页条数改变事件
    const handleSizeChange = (val) => {
        pageSize.value = val;
        fetchData();
    };

    // 根据当前页码和每页显示条数获取数据
    const fetchData = () => {
        axios({
            method: 'POST',
            url: '/api/teamSelectAll',
            data: {
                ...formInline.value,
                page: currentPage.value,
                limit: pageSize.value,
            },
        }).then((response) => {
            if (response.data.flag) {
                alert('查询成功');
                Date1.value = response.data.data;
                total.value = response.data.total;
            } else {
                alert(response.data.message);
            }
        }).catch((error) => {
            console.error('发生错误:', error);
        });
    };
    // 初始化页面数据
    onMounted(() => {
        if (!initialized.value) {
            fetchData();
            initialized.value = true;
        }
    });
    const handleClick = () => {
        currentPage.value = 1; // 重置当前页码为第一页
        fetchData();
    };



import {
  Delete,
  Search,
} from '@element-plus/icons-vue'
import axios from 'axios';
import {FormInstance, resultProps} from 'element-plus';
import { ElMessageBox } from 'element-plus';
    import {onMounted, ref} from 'vue';
import { useRouter } from 'vue-router'
const formRef = ref<FormInstance>()
const formInline = ref({
    sname:'',
    departmentName:'',
    className:'',
});
type student = {
    sid: number;
    sname: string;
    spassword: string;
    identification:string;
    age: number;
    sex:string;
    phone:string;
    departmentName:string;
    address:string;
    className:string;
}
let Date1 = ref([]);
const router = useRouter();

// axios({
//     method: 'POST',
//     url: '/api/teamSelectAll',
//     data: formInline.value
// }).then(function (result) {
//     Date1.value = result.data.data;
// });
// const search=()=>{ 
//     axios({
//         method: 'POST',
//         url: '/api/teamSelectAll',
//         data: formInline.value
//     }).then(function(response){ 
//         if(response.data.flag){ 
//             alert('查询成功') 
//             Date1.value=response.data.data; 
//         }else{ 
//             alert(response.data.message) 
//         } 
//     }).catch(error => { 
//         console.error('发生错误:', error); 
//     }); 
//     return { 
//         formInline, 
//         search 
//     } 
// } 

</script>
<style scoped>
.input {
  width: 300px;
  height: 40px;
  font-size: 18px;
  border: 1px solid #ccc;
}
.auto{
    width: 100px;
    height: 40px;
    font-size: 16px;
    background-color: #FFA500; /* 橙色 */
    color: white;
    border-radius: 20px;
    font-weight: bold;
    position: absolute;
    right: 20%;

}
.add{
    width: 120px;
    height: 40px;
    font-size: 16px;
    background-color: #FFA500; /* 橙色 */
    color: white;
    border-radius: 50px;
    font-weight: bold;
    position: absolute;
    right: 28%;

}
.input{
    width: 300px;
  height: 40px;
  font-size: 18px;
  border: 1px solid #ccc;
  left: 300px;
}
.blank{
    width: 20px;
}
.keyword{
    width: 100px;
    height: 40px;
    font-size: 16px;
    background-color: #FFA500; /* 橙色 */
    color: white;
    position: absolute;
    left: 530px;
    font-weight: bold;
}
</style> 
<p>为什么页面初始化加载两次，第一次有分页，第二次就没有了</p>