当前位置：首页 > ops >正文

vue3.2 前端动态分页算法

ops 2025/7/13 17:49:57

文章目录

- 背景
- 思路
- 页面情况
- 核心代码
- 小结
- 效果

背景

   1. 后台接口只是动态返回一个数组的数据，前端需要根据数据量的大小判断是否需要分页，页面高度固定2. 页面根据页数大小有不同的展示a. 只有一页  头部 + 内容 + 统计 + 尾部b. 多页i.  第一页 头部 + 内容 + 尾部ii. 中间页 内容 + 尾部iii. 最后一页 内容 + 统计 + 尾部

思路

	1. 先判断是否一页能满足 如果能满足 不做数据处理2. 不满足则肯定是多页a. 先计算第一页的逻辑，将数组分为[第一页数据, 剩余数据]b. 剩余数据只有两种情况i. 符合尾页逻辑 直接将剩余数据放入最后一页ii. 不符合尾页逻辑 递归实现中间页

页面情况

 s1 只有一页  不需要操作s2 多页a. 第一页因为要显示头部  所以高度为  540 - 50b. 中间页只显示内容      所以高度为  540c. 尾页因为要显示统计    所以高度为  540 - 50

核心代码

<template><div class="container"><div class="page" v-for="(list, index) in lists" :key="index"><div class="top" v-if="index === 0"><VHead /></div><div class="middle"><VTable :item="list" /><VTotal v-if="index === lists.length - 1" /></div><div class="bottom"><VFooter /></div></div></div>
</template><script setup>
import { ref, onMounted, nextTick } from 'vue'
import VHead from './components/VHead.vue'
import VTable from './components/VTable.vue'
import VTotal from './components/VTotal.vue'
import VFooter from './components/VFooter.vue'
import { init } from './data/index.js'const HEIGHT = 540const list = init(5)
const lists = ref([])const render = async () => {lists.value = [list]await nextTick()calculatePages()
}const getTrs = () => {const trEls = document.querySelectorAll('.v-table tbody tr')let trHeights = []for (let i = 0; i < trEls.length; i++) {trHeights.push(trEls[i].offsetHeight)}const trHeightsTotal = trHeights.reduce((acc, cur) => acc + cur, 0)return {trHeights,trHeightsTotal}
}const calculatePages = () => {const isSiglePage = getIsSinglePage()if (!isSiglePage) {const remainIndex = calculateFirstPage()lists.value = [list.slice(0, remainIndex)]calculateOtherPages(remainIndex)}
}const getIsSinglePage = () => {const { trHeightsTotal } = getTrs()if (trHeightsTotal + 100 > HEIGHT) {return false}return true
}const calculateFirstPage = () => {const { trHeights } = getTrs()const maxHeight = HEIGHT - 50let total = 0let index = 0for (let i = 0; i < trHeights.length; i++) {if (total + trHeights[i] > maxHeight) {break}total += trHeights[i]index = i}return index
}const calculateOtherPages = (remainIndex) => {const { trHeights } = getTrs()const remainTrHeights = trHeights.slice(remainIndex)const remainTrTotal = remainTrHeights.reduce((acc, cur) => acc + cur, 0)if (remainTrTotal + 50 > HEIGHT) {let total = 0let index = 0for (let i = remainIndex; i < trHeights.length; i++) {if (total + trHeights[i] > HEIGHT) {break}total += trHeights[i]index = i}if (index) {lists.value.push(list.slice(remainIndex, index))calculateOtherPages(index)}} else {lists.value.push(list.slice(remainIndex))}
}onMounted(() => {render()
})
</script><style lang="scss" scoped>
.container {display: flex;flex-direction: column;
}.page {width: 800px;height: 590px;border: 1px solid #ccc;display: flex;flex-direction: column;justify-content: space-between;margin-bottom: 2px;overflow: hidden;.top,.bottom {height: 50px;}.middle {flex: 1;overflow: hidden;}
}
</style>