SSM项目实战-前端-添加分页控件-调正页面布局

1、Index.vue

<template><div class="common-layout"><el-container><el-header><el-row><el-col :span="24"><el-button type="primary" plain @click="toAdd">新增</el-button></el-col></el-row></el-header><el-main><el-row><el-col :span="24"><div style="widht:100%;border:0 solid red;"><el-table :data="schedulePageInfo.list" style="width: 800px;"><el-table-column label="编号" width="180"><template #default="scope"><div style="display: flex; align-items: center"><span style="margin-left: 10px">{{ scope.row.sid }}</span></div></template></el-table-column><el-table-column label="标题" width="180"><template #default="scope"><div style="display: flex; align-items: center"><span style="margin-left: 10px">{{ scope.row.title }}</span></div></template></el-table-column><el-table-column label="是否完成" width="180"><template #default="scope"><div style="display: flex; align-items: center"><span style="margin-left: 10px">{{ scope.row.completed ? '完成' : '未完成' }}</span></div></template></el-table-column><el-table-column label="其他操作"><template #default="scope"><el-button size="small" @click="handleEdit(scope.row)">Edit</el-button><el-button size="small" type="danger" @click="handleDelete(scope.row.id)">Delete</el-button></template></el-table-column></el-table></div></el-col></el-row></el-main><el-footer><el-row><el-col :span="24"><el-pagination layout="prev, pager, next" v-model:current-page="schedulePageInfo.pageNum":page-size="schedulePageInfo.pageSize":total="schedulePageInfo.total" @current-change="handleCurrentChange"/><el-dialog v-model="dialogFormVisible" title="Shipping address"><el-form :model="form"><el-form-item label="标题" ><el-input v-model="form.title" autocomplete="off" /></el-form-item><el-form-item label="Zones" ><el-radio-group v-model="form.completed"><el-radio :label="true">完成</el-radio><el-radio :label="false">未完成</el-radio></el-radio-group></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogFormVisible = false">取消</el-button><el-button type="primary" @click="saveOrUpdate">确定</el-button></span></template></el-dialog></el-col></el-row></el-footer></el-container></div>
</template><script lang="ts" setup>
import {delSchedule, getScheduleList, saveSchedule, updateSchedule} from '../api/schedule.js';
import {onMounted, reactive, ref} from 'vue';
import {ElMessage, ElMessageBox} from "element-plus";
import {userStore} from '../store/sysUserStore';let currUser = userStore();let dialogFormVisible = ref(false);let form = reactive({id: 0,title: '',completed: false
})let form0 = reactive({id: 0,title: '',completed: false
})
let resetFormData = () => {Object.assign(form, form0);
}
let schedulePageInfo=reactive({total: 0,list:[],pageNum: 1,pageSize: 3,pages: 0,navigatepageNums: [],msg: '',
})
let scheduleList = reactive([])let queryvo=reactive({uid:1,pageNum: 1,
})let handleCurrentChange=(num)=>{queryvo.pageNum = num;loadData()
}let loadData = () => {getScheduleList(queryvo).then(response => {Object.assign(schedulePageInfo, response.data.data)})
}let saveOrUpdate = () => {if (form.id === 0) {save();} else {update();}
}let save = async () => {await saveSchedule(form)dialogFormVisible.value = falseresetFormData();loadData();
}let toAdd = () => {resetFormData();dialogFormVisible.value = true;
}onMounted(() => {queryvo.uid=currUser.uidqueryvo.pageNum=1loadData();
})let update = async () => {await updateSchedule(form)dialogFormVisible.value = falseloadData();
}interface scheduleList {id: Numbertitle: stringcompleted: boolean
}const handleEdit = row => {dialogFormVisible.value = true;Object.assign(form, row);
}
const handleDelete = id => {ElMessageBox.confirm('是否确认删除?','提示',{confirmButtonText: '是',cancelButtonText: '否',type: 'warning',}).then(async () => {await delSchedule(id)dialogFormVisible.value = falseloadData();}).catch(() => {ElMessage({type: 'info',message: '你取消了操作',})})
};
</script>

 2、@current-change

            <el-pagination layout="prev, pager, next" v-model:current-page="schedulePageInfo.pageNum":page-size="schedulePageInfo.pageSize":total="schedulePageInfo.total" @current-change="handleCurrentChange"/>

@current-change 是 Vue.js 的一个事件监听器，它监听的是current-page的变化。当current-page的值发生改变时，会触发这个事件，并执行handleCurrentChange方法。

在你的 <el-pagination> 组件中，v-model:current-page="schedulePageInfo.pageNum" 是一个双向数据绑定，它将 <el-pagination> 组件的当前页码与你的 Vue 实例的 schedulePageInfo.pageNum 属性绑定在一起。当用户通过 <el-pagination> 组件的 UI 改变当前页码时，schedulePageInfo.pageNum 的值也会相应地改变。

当 schedulePageInfo.pageNum 的值改变时（即当前页码发生改变），@current-change 事件就会被触发，然后调用 handleCurrentChange 方法。你可以在 methods 中定义 handleCurrentChange 方法，以处理当前页码变化后的逻辑。例如，你可能需要根据新的页码从服务器获取新的数据，或者更新 UI 来显示当前页码等。