100% {transform: translateY(0); } 40% {transform: translateY(-10px); } 60% {transform: translateY(-5px); }}keyframes fadeInUp { from {opacity: 0;transform: translateY(30px); } to {opacity: 1;transform: translateY(0); }}/* 响应式设计 */media (max-width: 1024px) { .stats-card {padding: 20px; }.stat-number {font-size: 28px; }.list-item {grid-template-columns: 80px 1fr 1.5fr 100px 80px;gap: 16px;padding: 16px; }}media (max-width: 768px) { .order-info-container {padding: 15px; }.stats-card {flex-direction: column;gap: 20px;padding: 20px; }.stat-item {flex-direction: row;justify-content: space-between;width: 100%; }.stat-number {font-size: 24px;margin-bottom: 0; }.list-item {grid-template-columns: 1fr;gap: 12px;padding: 16px; }.list-item div {flex-direction: row;justify-content: space-between;align-items: center; }.list-item .id-label， 255。

// 改变每页显示数量handleSizeChange(sizeVal) {console.log(每页显示数量:， 174， pageVal)this.renderPage(pageVal);}， .list-item .name-value。

174，         在实际的开发中可能因为 用户需求或者数据导出 需要 后端一次性返回大量数据 如10w条这个时候需要前端做处理否则会造成页面卡顿、白屏甚至崩溃。

.list-item .qty-label {font-size: 11px; }.list-item .id-value， 0.1); padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(39， 0，description: Description for Item ${i}， // 当前表格页显示数据total: 0，// 存储全部数据totalData: []， template div classorder-info-container :data-totaltotalData.length!-- 页面标题 --h1 classpage-title订单信息列表/h1!-- 页面头部统计信息 --div classpage-headerdiv classstats-carddiv classstat-itemspan classstat-number{{ totalData.length }}/spanspan classstat-label总记录数/span/divdiv classstat-itemspan classstat-number{{ allData.length }}/spanspan classstat-label已加载/span/divdiv classstat-itemspan classstat-number{{ Math.round((allData.length / totalData.length) * 100) }}%/spanspan classstat-label加载进度/span/div/div/div!-- 数据列表 --div classdata-listdiv v-for(item， 0， 0.3); letter-spacing: 1px;}/* 添加滚动条样式 */.order-info-container::-webkit-scrollbar { width: 8px;}.order-info-container::-webkit-scrollbar-track { background: rgba(255， pager， 0.95); border-radius: 16px; margin-top: 20px; box-shadow: 0 8px 32px rgba(0， 20，// 变化当前页handleCurrentChange(pageVal) {console.log(当前页:， .list-item .price-label，为了照顾所有同学博主直接写了一个完整的案例可以直接复制演示 示例 template divel-table:datapageDatastripeborderstylewidth: 100%height500el-table-column propid aligncenter labelid/el-table-columnel-table-column propname aligncenter label姓名/el-table-columnel-table-column propdescription aligncenter label描述/el-table-columnel-table-column propprice aligncenter label价格/el-table-columnel-table-column propquantity aligncenter label数量/el-table-column/el-tableel-paginationcurrent-changehandleCurrentChangesize-changehandleSizeChange:current-pagecurrentPage:page-sizes[10，