第12课 Table表格与Pagination分页使用el-table渲染列表数据掌握列配置prop/label/width通过作用域插槽自定义单元格状态标签、操作按钮实现el-pagination分页与表格联动理解后端分页流程加入v-loading加载态掌握数据请求与展示的标准模式1. Element-Plus 表格与分页组件引入1.1 安装npminstallelement-plus1.2 全量注册main.jsimportElementPlusfromelement-plusimportelement-plus/dist/index.css// 样式必须importzhCnfromelement-plus/es/locale/lang/zh-cn// 中文包app.use(ElementPlus,{locale:zhCn})全量注册后所有el-组件可直接使用无需手动引入。2.el-table基本用法2.1 核心模版el-table:datauserListstripev-loadingloadingel-table-columnpropidlabelIDwidth70/el-table-columnpropnamelabel姓名width110//el-table:data绑定数组数据驱动行数stripe隔行变色斑马纹v-loading加载指令true时表格变灰并显示转圈2.2 列配置三个核心属性属性含义说明prop数据字段名必须与数据中的字段完全一致label表头显示文字可任意命名width列宽度px可不设由内容自动分配也可用min-width3. 插槽自定义列作用域插槽实战当表格列需要特殊展示如状态徽章、操作按钮时使用#default{ row }作用域插槽获取当前行数据。3.1 状态列彩色标签el-table-columnlabel状态width100template#default{ row }el-tag:typerow.status 启用 ? success : danger{{ row.status }}/el-tag/template/el-table-columnrow为当前行的数据对象el-tag的type决定颜色success绿/warning/danger红/info3.2 操作列el-table-columnlabel操作min-width170template#default{ row }el-buttonsizesmallclickgoDetail(row)查看详情/el-buttonel-buttonsizesmalltypedangerplainclickhandleDelete(row)删除/el-button/template/el-table-column点击事件直接使用row携带该行数据sizesmall使按钮紧凑plain为镂空样式4. 数据层设计接口层模拟真实数据来自后端接口为统一管理抽取api层。4.1 模拟数据 (mock/users.js)生成固定 46 条测试数据包含id,name,role,status,phone,createdAt。4.2 接口函数 (api/user.js)exportfunctionfetchUserList({page1,pageSize10}{}){returnnewPromise((resolve){setTimeout((){conststart(page-1)*pageSizeconstlistmockUsers.slice(start,startpageSize)resolve({list,total:mockUsers.length})},600)// 模拟网络延迟})}返回结构{ list: 当前页数据, total: 总条数 }—— 正是后端分页的标准格式。5. 页面逻辑与 Loading5.1 数据与分页状态constuserListref([])constloadingref(false)constcurrentPageref(1)constpageSizeref(10)consttotalref(0)5.2 加载函数asyncfunctionloadUserList(){loading.valuetrueconst{list,total:totalCount}awaitfetchUserList({page:currentPage.value,pageSize:pageSize.value})userList.valuelist total.valuetotalCount loading.valuefalse}5.3 生命周期import{onMounted}fromvueonMounted(loadUserList)// 进入页面自动加载第一页6.el-pagination分页组件6.1 基本配置el-paginationv-model:current-pagecurrentPagev-model:page-sizepageSize:totaltotal:page-sizes[10, 20, 50]layouttotal, sizes, prev, pager, next, jumperchangeloadUserList/6.2 属性详解属性/事件说明v-model:current-page双向绑定当前页码v-model:page-size双向绑定每页条数:total总条数必须来自后端不是userList.length:page-sizes可选每页条数选项layout分页条布局字符串控制显示哪些模块change页码或每页条数任一变化时触发调用加载函数layout常用令牌total显示总条数sizes每页条数下拉选择prev,pager,next上一页、页码列表、下一页jumper跳至第几页输入框6.3 联动本质用户点击页码/修改每页条数 →currentPage/pageSize变化change事件触发 → 调用loadUserList重新请求数据新数据赋值给userList表格自动刷新7. 常见错误排查现象原因解决表格无样式裸露未引入element-plus/dist/index.cssmain.js中补上样式引入el-table不渲染未注册app.use(ElementPlus)检查main.js注册代码列头有字、列体空白prop与数据字段名不一致核对大小写和拼写状态标签全是一个颜色三元表达式逻辑错误注意row.status 启用 ? success : danger插槽中row未定义解构写法错误使用#default{ row }分页显示“共 0 条”total赋值为userList.length必须使用接口返回的total切换页码表格不刷新未绑定change事件添加changeloadUserList调整每页条数后页码错乱正常现象自动校正但可能想回到第1页可在loadUserList开头currentPage.value 1总结表格el-tableel-table-column普通列用prop复杂列用插槽插槽template #default{ row }获得当前行数据常用于状态标签和操作按钮分页el-pagination双向绑定页码和页大小change触发重新请求数据流fetchUserList({page, pageSize})→ 返回{list, total}→ 更新视图加载态v-loadingloading请求前true完成后false分离api 层便于后续接入真实 Axios 而不改页面逻辑