先附上效果图

首页弹窗代码

<el-table :data="tableData" style="width: 100%" border stripe><el-table-column v-for="{ id, prop, label } in tableColumn" :prop="prop" :key="id" :label="label" :width="label == '序号' ? 100 : ''" align="center" /><el-table-column fixed="right" label="操作" align="center" width="240"><template #default="scope"><el-button link type="primary" size="small" @click="handlEmodify(scope.row)">编辑</el-button><el-button link type="primary" size="small" @click="handleDel(scope.row)">删除</el-button><el-button link type="primary" size="small" @click="handlDetail(scope.row)">查看</el-button></template></el-table-column>
</el-table>
// 分页组件 这里二次封装了一下
<pagination class="pagination" :total="total" :pageNo="pageNo" :pageSize="pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />

import { ref, onMounted, defineComponent, reactive } from 'vue'
import { ElMessage } from 'element-plus'
// mock数据 也可以自己写到页面上
import { getTableList } from '@/api/home.js'
// 二次封装的分页组件
import pagination from './components/pagination.vue'
// 循环渲染 tableColumn 数据
const tableColumn = ref([{ id: 1, prop: 'id', label: '序号' },{ id: 2, prop: 'date', label: '时间' },{ id: 3, prop: 'name', label: '姓名' },{ id: 4, prop: 'address', label: '地址' }
])
// 当前页
const pageNo = ref(1)
// 当前大小
const pageSize = ref(10)
// 从接口获取的所有数据
const tableData = ref([])
// 筛选条数
const total = ref(0)
// 总条数
const filterData = reactive({data: []
})// 初始化表格
const initTable = async () => {let res = await getTableList()// 不存在 data 说明没有数据 中断代码执行if (!res.data) return false// 全部数据赋值给 filterDatafilterData.data = res.data// 赋值总条数给 totaltotal.value = res.total// 分页逻辑在这里体现let start = pageNo.value > 1 ? (pageNo.value - 1) * pageSize.value : 0let end = pageNo.value * pageSize.value// 将符合条件的数据赋值给 tableDatatableData.value = res.data.slice(start, end)
}// 分页大小事件触发此方法
const handleSizeChange = val => {pageNo.value = 1pageSize.value = valinitTable()
}
// 分页数事件触发此方法
const handleCurrentChange = val => {pageNo.value = valinitTable()
}

pagination 组件

<template><el-pagination background :current-page="props.pageNo" :page-sizes="[10, 20, 30, 50]" :page-size="props.pageSize"layout="total, sizes, prev, pager, next, jumper" :total="props.total" @size-change="handleSizeChange"@current-change="handleCurrentChange" />
</template>

const props = defineProps(['total', 'pageNo', 'pageSize'])
const emit = defineEmits(['handleSizeChange', 'handleCurrentChange'])const handleSizeChange = val => { emit('handleSizeChange', val) }
const handleCurrentChange = val => { emit('handleCurrentChange', val) }