wordpress做下载型网站6,网站一年的费用,网站建设账户搭建,宁波建网站推荐目录 前言1. 基本知识2. Demo3. 实战 前言
需求#xff1a;从无到有做一个分页并且附带分页的导入导出增删改查等功能
前提一定是要先有分页#xff0c;作为全栈玩家#xff0c;先在前端部署一个分页的列表
相关后续的功能#xff0c;是Java#xff0c;推荐阅读#x… 目录 前言1. 基本知识2. Demo3. 实战 前言
需求从无到有做一个分页并且附带分页的导入导出增删改查等功能
前提一定是要先有分页作为全栈玩家先在前端部署一个分页的列表
相关后续的功能是Java推荐阅读
java框架 零基础从入门到精通的学习路线 附开源项目面经等超全【Java项目】实战CRUD的功能整理持续更新
1. 基本知识
主要是用于在数据量较大的情况下将数据分成多个页面显示
通过分页可以避免一次性加载大量数据导致的性能问题并且可以使用户更方便地浏览数据 怎样才能做到这样一个页面需要先了解一些基本的知识可以提前去官网预热下官网补充说明
需要注意的点每一步都比较重要不然会丢失数据查询不到
绑定值current-page 和 page-size 需要与组件中的数据绑定以确保分页状态和显示的一致性事件处理需要处理分页组件的 current-change 和 size-change 事件以便在用户改变当前页或每页条目数时更新数据数据同步分页状态变化时需要确保组件显示的数据和分页控件保持同步
对应的属性说明
current-page当前页数类型为 Numberpage-size 每页显示条目个数类型为 Numbertotal总条目数类型为 Numberpage-sizes显示个数的选择器类型为 Arraylayout组件布局子组件名用逗号分隔 常用的子组件有 prev, pager, next, jumper, total, sizes, -, slotsmall 小型分页样式类型为 Boolean默认为false
相关的事件设置有如下
current-change当前页变化时触发返回当前页数。size-change每页条目数变化时触发返回新的每页条目数
2. Demo
基本的Demo主要以形式展示为主
示例 1基本使用
templateel-pagination:total100:page-size10v-model:current-pagecurrentPagelayoutprev, pager, nextcurrent-changehandlePageChange/
/templatescript langts setup
import { ref } from vueconst currentPage ref(1)const handlePageChange (page: number) {console.log(Current page changed to: ${page})
}
/script示例 2带有每页条目数选择器
templateel-pagination:total1000v-model:current-pagecurrentPagev-model:page-sizepageSize:page-sizes[10, 20, 30, 50]layoutsizes, prev, pager, nextsize-changehandleSizeChangecurrent-changehandlePageChange/
/templatescript langts setup
import { ref } from vueconst currentPage ref(1)
const pageSize ref(10)const handlePageChange (page: number) {console.log(Current page changed to: ${page})
}const handleSizeChange (size: number) {console.log(Page size changed to: ${size})
}
/script示例 3显示总条目数和跳转页码
templateel-pagination:total500v-model:current-pagecurrentPagelayouttotal, prev, pager, next, jumpercurrent-changehandlePageChange/
/templatescript langts setup
import { ref } from vueconst currentPage ref(1)const handlePageChange (page: number) {console.log(Current page changed to: ${page})
}
/script示例 4使用小型分页样式
templateel-pagination:total200v-model:current-pagecurrentPagelayoutprev, pager, next:smalltruecurrent-changehandlePageChange/
/templatescript langts setup
import { ref } from vueconst currentPage ref(1)const handlePageChange (page: number) {console.log(Current page changed to: ${page})
}
/script示例 5响应式分页按钮数量
templateel-pagination:total300v-model:current-pagecurrentPage:pager-countpagerCountlayoutprev, pager, nextcurrent-changehandlePageChange/
/templatescript langts setup
import { ref, computed } from vueconst currentPage ref(1)
const pagerCount computed(() document.body.clientWidth 768 ? 5 : 7)const handlePageChange (page: number) {console.log(Current page changed to: ${page})
}
/script3. 实战
可以定义新的一套模版
templateel-pagination:backgroundtrue:page-sizes[5, 10, 30, 50]:pager-countpagerCount:totaltotalv-showtotal 0v-model:current-pagecurrentPagev-model:page-sizepageSizeclassfloat-right mb-15px mt-15pxlayouttotal, sizes, prev, pager, next, jumpersize-changehandleSizeChangecurrent-changehandleCurrentChange/
/templatescript langts setup
import { computed, watchEffect, ref } from vuedefineOptions({ name: Pagination })// 定义组件接收的 props
const props defineProps({// 总条目数total: {required: true,type: Number},// 当前页数默认为 1page: {type: Number,default: 1},// 每页显示条目个数默认为 20limit: {type: Number,default: 20},// 最大页码按钮数移动端默认值为 5桌面端为 7pagerCount: {type: Number,default: document.body.clientWidth 992 ? 5 : 7}
})// 定义组件发出的事件
const emit defineEmits([update:page, update:limit, pagination])// 计算属性用于双向绑定 currentPage 和 pageSize
const currentPage computed({get() {return props.page},set(val) {emit(update:page, val)}
})
const pageSize computed({get() {return props.limit},set(val) {emit(update:limit, val)}
})// 处理每页条目数变化的函数
const handleSizeChange (val) {// 如果修改后当前页超过最大页面则跳转到第一页if (currentPage.value * val props.total) {currentPage.value 1}emit(pagination, { page: currentPage.value, limit: val })
}// 处理当前页变化的函数
const handleCurrentChange (val) {emit(pagination, { page: val, limit: pageSize.value })
}
/scriptstyle
/* 可选样式 */
.float-right {float: right;
}
.mb-15px {margin-bottom: 15px;
}
.mt-15px {margin-top: 15px;
}
/style之后通过这个模版 直接引用实战提取的Demo
template!-- 分页 --Pagination:totaltotalv-model:pagequeryParams.pageNov-model:limitqueryParams.pageSizepaginationgetList/
/templatescript setup langts
import { GoodsStoragePlanApi } from /api/dangerous/goodsstorageplan
import { ref, reactive, onMounted } from vueconst loading ref(true)
const list ref([])
const total ref(0)
const queryParams reactive({pageNo: 1,pageSize: 10,createTime: [],
})/** 查询列表 */
const getList async () {loading.value truetry {const data await GoodsStoragePlanApi.getGoodsStoragePlanPage(queryParams)list.value data.listtotal.value data.total} finally {loading.value false}
}/** 初始化 **/
onMounted(() {getList()
})
/script
