企业官网建设流程全解析

还是element plus插件的功能，el-pagination。

代码

代码总共没几行，直接全拿来：

<template><divclass="blog-view-container"><!-- 标题区域 (可选，增加页面语义) --><divclass="page-header"><h2>会员专属答疑</h2></div><!-- 数据表格区域 --><el-cardshadow="never"class="table-card"><el-table:data="tableData"style="width:100%"borderv-loading="loading":header-cell-style="{ background: '#f5f7fa', color: '#606266' }"><!-- 仅展示 name 字段 --><el-table-columnprop="name"label="名称"min-width="200"><template#default="scope"><spanclass="name-text">{{ scope.row.name }}</span></template></el-table-column></el-table><!-- 分页插件区域 --><divclass="pagination-container"><el-paginationv-model:current-page="queryParams.pageNum"v-model:page-size="queryParams.pageSize":page-sizes="[5, 10, 20, 50]"layout="total, sizes, prev, pager, next, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"background/></div></el-card></div></template><scriptsetup>import{ref,reactive,onMounted}from'vue';// 假设您使用了 axios，如果没有请替换为您项目中的 request 工具importaxiosfrom'axios';// --- 状态定义 ---constloading=ref(false);consttableData=ref([]);consttotal=ref(0);// 查询参数constqueryParams=reactive({pageNum:1,// 当前页码pageSize:5,// 每页条数});// --- 核心逻辑 ---/** * 获取列表数据 */constfetchData=async()=>{loading.value=true;try{// 构建请求体，根据需求传入分页参数// 注意：后端接口通常接收 pageNum/pageNo 或 current，这里假设通用命名constparams={pageNum:queryParams.pageNum,pageSize:queryParams.pageSize,};// 发起 POST 请求constres=awaitaxios.post('/mysite/api/blog/query',params);if(res.data.success){tableData.value=res.data.data||[];total.value=res.data.total||0;}else{console.error('请求失败:',res.data.message);}}catch(error){console.error('网络异常:',error);}finally{loading.value=false;}};/** * 页码改变事件 */consthandleCurrentChange=(val)=>{queryParams.pageNum=val;fetchData();};/** * 每页条数改变事件 */consthandleSizeChange=(val)=>{queryParams.pageSize=val;queryParams.pageNum=1;// 切换条数后通常重置回第一页fetchData();};// 初始化加载onMounted(()=>{fetchData();});</script><stylescoped>.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>