文章目录代码还是element plus插件的功能el-pagination。代码代码总共没几行直接全拿来templatedivclassblog-view-container!-- 标题区域 (可选增加页面语义) --divclasspage-headerh2会员专属答疑/h2/div!-- 数据表格区域 --el-cardshadowneverclasstable-cardel-table:datatableDatastylewidth:100%borderv-loadingloading:header-cell-style{ background: #f5f7fa, color: #606266 }!-- 仅展示 name 字段 --el-table-columnpropnamelabel名称min-width200template#defaultscopespanclassname-text{{ scope.row.name }}/span/template/el-table-column/el-table!-- 分页插件区域 --divclasspagination-containerel-paginationv-model:current-pagequeryParams.pageNumv-model:page-sizequeryParams.pageSize:page-sizes[5, 10, 20, 50]layouttotal, sizes, prev, pager, next, jumper:totaltotalsize-changehandleSizeChangecurrent-changehandleCurrentChangebackground//div/el-card/div/templatescriptsetupimport{ref,reactive,onMounted}fromvue;// 假设您使用了 axios如果没有请替换为您项目中的 request 工具importaxiosfromaxios;// --- 状态定义 ---constloadingref(false);consttableDataref([]);consttotalref(0);// 查询参数constqueryParamsreactive({pageNum:1,// 当前页码pageSize:5,// 每页条数});// --- 核心逻辑 ---/** * 获取列表数据 */constfetchDataasync(){loading.valuetrue;try{// 构建请求体根据需求传入分页参数// 注意后端接口通常接收 pageNum/pageNo 或 current这里假设通用命名constparams{pageNum:queryParams.pageNum,pageSize:queryParams.pageSize,};// 发起 POST 请求constresawaitaxios.post(/mysite/api/blog/query,params);if(res.data.success){tableData.valueres.data.data||[];total.valueres.data.total||0;}else{console.error(请求失败:,res.data.message);}}catch(error){console.error(网络异常:,error);}finally{loading.valuefalse;}};/** * 页码改变事件 */consthandleCurrentChange(val){queryParams.pageNumval;fetchData();};/** * 每页条数改变事件 */consthandleSizeChange(val){queryParams.pageSizeval;queryParams.pageNum1;// 切换条数后通常重置回第一页fetchData();};// 初始化加载onMounted((){fetchData();});/scriptstylescoped.blog-view-container{padding:20px;max-width:1200px;margin:0 auto;}.page-header{margin-bottom:20px;}.page-header h2{font-size:20px;color:#303133;font-weight:bold;}.table-card{border-radius:8px;}/* 调整分页栏位置到右侧或居中模仿截图效果 */.pagination-container{margin-top:20px;display:flex;justify-content:flex-end;/* 靠右对齐如需居中改为 center */align-items:center;}.name-text{font-weight:500;color:#303133;}/style
vue el-pagination实现分页
文章目录代码还是element plus插件的功能el-pagination。代码代码总共没几行直接全拿来templatedivclassblog-view-container!-- 标题区域 (可选增加页面语义) --divclasspage-headerh2会员专属答疑/h2/div!-- 数据表格区域 --el-cardshadowneverclasstable-cardel-table:datatableDatastylewidth:100%borderv-loadingloading:header-cell-style{ background: #f5f7fa, color: #606266 }!-- 仅展示 name 字段 --el-table-columnpropnamelabel名称min-width200template#defaultscopespanclassname-text{{ scope.row.name }}/span/template/el-table-column/el-table!-- 分页插件区域 --divclasspagination-containerel-paginationv-model:current-pagequeryParams.pageNumv-model:page-sizequeryParams.pageSize:page-sizes[5, 10, 20, 50]layouttotal, sizes, prev, pager, next, jumper:totaltotalsize-changehandleSizeChangecurrent-changehandleCurrentChangebackground//div/el-card/div/templatescriptsetupimport{ref,reactive,onMounted}fromvue;// 假设您使用了 axios如果没有请替换为您项目中的 request 工具importaxiosfromaxios;// --- 状态定义 ---constloadingref(false);consttableDataref([]);consttotalref(0);// 查询参数constqueryParamsreactive({pageNum:1,// 当前页码pageSize:5,// 每页条数});// --- 核心逻辑 ---/** * 获取列表数据 */constfetchDataasync(){loading.valuetrue;try{// 构建请求体根据需求传入分页参数// 注意后端接口通常接收 pageNum/pageNo 或 current这里假设通用命名constparams{pageNum:queryParams.pageNum,pageSize:queryParams.pageSize,};// 发起 POST 请求constresawaitaxios.post(/mysite/api/blog/query,params);if(res.data.success){tableData.valueres.data.data||[];total.valueres.data.total||0;}else{console.error(请求失败:,res.data.message);}}catch(error){console.error(网络异常:,error);}finally{loading.valuefalse;}};/** * 页码改变事件 */consthandleCurrentChange(val){queryParams.pageNumval;fetchData();};/** * 每页条数改变事件 */consthandleSizeChange(val){queryParams.pageSizeval;queryParams.pageNum1;// 切换条数后通常重置回第一页fetchData();};// 初始化加载onMounted((){fetchData();});/scriptstylescoped.blog-view-container{padding:20px;max-width:1200px;margin:0 auto;}.page-header{margin-bottom:20px;}.page-header h2{font-size:20px;color:#303133;font-weight:bold;}.table-card{border-radius:8px;}/* 调整分页栏位置到右侧或居中模仿截图效果 */.pagination-container{margin-top:20px;display:flex;justify-content:flex-end;/* 靠右对齐如需居中改为 center */align-items:center;}.name-text{font-weight:500;color:#303133;}/style
