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

<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();
</script>