fix(分页): 修复分页逻辑问题并优化导航配置
修复过滤分页时错误剔除空页的问题,确保分页总数与分页符定义一致 优化分页导航配置,仅从分页符字段读取文案和状态 将循环中的key从index改为item.key以提高稳定性
Showing
2 changed files
with
29 additions
and
15 deletions
| ... | @@ -16,10 +16,12 @@ export function usePagination(formDataRef, options = {}) { | ... | @@ -16,10 +16,12 @@ export function usePagination(formDataRef, options = {}) { |
| 16 | // 当前页索引 | 16 | // 当前页索引 |
| 17 | const current_page_index = ref(0) | 17 | const current_page_index = ref(0) |
| 18 | 18 | ||
| 19 | - // 过滤后的分页:剔除被隐藏(disabled)的字段,以及空页 | 19 | + // 过滤后的分页:剔除被隐藏(disabled)的字段,但保留空页占位,确保分页总数与 paginator 一致 |
| 20 | const filtered_pages = computed(() => { | 20 | const filtered_pages = computed(() => { |
| 21 | if (!pages_raw.value.length) { | 21 | if (!pages_raw.value.length) { |
| 22 | - const keys = formDataRef.value.filter(i => !i.component_props?.disabled).map(i => i.key) | 22 | + const keys = formDataRef.value |
| 23 | + .filter(i => !i.component_props?.disabled && i.component_props?.tag !== 'paginator') | ||
| 24 | + .map(i => i.key) | ||
| 23 | return [keys] | 25 | return [keys] |
| 24 | } | 26 | } |
| 25 | const result = pages_raw.value | 27 | const result = pages_raw.value |
| ... | @@ -27,7 +29,7 @@ export function usePagination(formDataRef, options = {}) { | ... | @@ -27,7 +29,7 @@ export function usePagination(formDataRef, options = {}) { |
| 27 | const f = formDataRef.value.find(i => i.key === k) | 29 | const f = formDataRef.value.find(i => i.key === k) |
| 28 | return f && !f.component_props?.disabled | 30 | return f && !f.component_props?.disabled |
| 29 | })) | 31 | })) |
| 30 | - .filter(keys => keys.length > 0) | 32 | + // 不再删除空页,以保证总页数符合分页符定义 |
| 31 | return result.length ? result : [[]] | 33 | return result.length ? result : [[]] |
| 32 | }) | 34 | }) |
| 33 | 35 | ||
| ... | @@ -47,15 +49,21 @@ export function usePagination(formDataRef, options = {}) { | ... | @@ -47,15 +49,21 @@ export function usePagination(formDataRef, options = {}) { |
| 47 | const buildPages = () => { | 49 | const buildPages = () => { |
| 48 | const result = [] | 50 | const result = [] |
| 49 | let cur = [] | 51 | let cur = [] |
| 52 | + // 连续的 paginator 需要忽略,避免出现空分页 | ||
| 53 | + let last_was_paginator = false | ||
| 50 | formDataRef.value.forEach(item => { | 54 | formDataRef.value.forEach(item => { |
| 51 | const tag = item.component_props?.tag | 55 | const tag = item.component_props?.tag |
| 52 | // 分隔符 paginator 作为分页分组边界 | 56 | // 分隔符 paginator 作为分页分组边界 |
| 53 | if (tag === 'paginator') { | 57 | if (tag === 'paginator') { |
| 58 | + // 若前一个也是 paginator,则忽略本次(不产生空页) | ||
| 59 | + if (last_was_paginator) return | ||
| 54 | if (cur.length) result.push(cur) | 60 | if (cur.length) result.push(cur) |
| 55 | cur = [] | 61 | cur = [] |
| 62 | + last_was_paginator = true | ||
| 56 | return | 63 | return |
| 57 | } | 64 | } |
| 58 | cur.push(item.key) | 65 | cur.push(item.key) |
| 66 | + last_was_paginator = false | ||
| 59 | }) | 67 | }) |
| 60 | if (cur.length) result.push(cur) | 68 | if (cur.length) result.push(cur) |
| 61 | if (result.length <= 1) { | 69 | if (result.length <= 1) { |
| ... | @@ -84,21 +92,27 @@ export function usePagination(formDataRef, options = {}) { | ... | @@ -84,21 +92,27 @@ export function usePagination(formDataRef, options = {}) { |
| 84 | { flush: 'post' } | 92 | { flush: 'post' } |
| 85 | ) | 93 | ) |
| 86 | 94 | ||
| 87 | - // 分页导航文案与禁用状态(按当前页字段的 component_props 提供的 mock 值) | 95 | + /** |
| 96 | + * 分页导航配置 | ||
| 97 | + * @description 仅从 tag 为 paginator 的字段中读取导航文案与可返回状态 | ||
| 98 | + * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}} | ||
| 99 | + */ | ||
| 88 | const page_nav = computed(() => { | 100 | const page_nav = computed(() => { |
| 89 | - const idx = current_page_index.value | 101 | + // 默认文案与状态 |
| 90 | - const keys = filtered_pages.value[idx] || [] | ||
| 91 | let prev_text = '上一页' | 102 | let prev_text = '上一页' |
| 92 | let next_text = '下一页' | 103 | let next_text = '下一页' |
| 93 | let prev_disabled = false | 104 | let prev_disabled = false |
| 94 | - for (let k of keys) { | 105 | + |
| 95 | - const item = formDataRef.value.find(i => i.key === k) | 106 | + // 仅查找 tag=paginator 的字段并提取其 component_props |
| 96 | - if (item && item.component_props) { | 107 | + const paginator_item = formDataRef.value.find(i => i?.component_props?.tag === 'paginator') |
| 97 | - if (item.component_props.back_title) prev_text = item.component_props.back_title | 108 | + if (paginator_item && paginator_item.component_props) { |
| 98 | - if (item.component_props.next_title) next_text = item.component_props.next_title | 109 | + const props = paginator_item.component_props |
| 99 | - if (typeof item.component_props.is_back === 'boolean') prev_disabled = item.component_props.is_back | 110 | + if (props.back_title) prev_text = props.back_title |
| 100 | - } | 111 | + if (props.next_title) next_text = props.next_title |
| 112 | + // is_back 表示是否允许返回 | ||
| 113 | + if (typeof props.is_back === 'boolean') prev_disabled = !props.is_back | ||
| 101 | } | 114 | } |
| 115 | + | ||
| 102 | return { prev_text, next_text, prev_disabled } | 116 | return { prev_text, next_text, prev_disabled } |
| 103 | }) | 117 | }) |
| 104 | 118 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-07-18 10:22:22 | 2 | * @Date: 2022-07-18 10:22:22 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-11-19 00:06:00 | 4 | + * @LastEditTime: 2025-11-19 18:04:59 |
| 5 | * @FilePath: /data-table/src/views/index.vue | 5 | * @FilePath: /data-table/src/views/index.vue |
| 6 | * @Description: 首页 | 6 | * @Description: 首页 |
| 7 | --> | 7 | --> |
| ... | @@ -25,7 +25,7 @@ | ... | @@ -25,7 +25,7 @@ |
| 25 | <van-config-provider :theme-vars="themeVars"> | 25 | <van-config-provider :theme-vars="themeVars"> |
| 26 | <van-form ref="myForm" @submit="onSubmit" @failed="onFailed" :scroll-to-error="true"> | 26 | <van-form ref="myForm" @submit="onSubmit" @failed="onFailed" :scroll-to-error="true"> |
| 27 | <van-cell-group :border="false"> | 27 | <van-cell-group :border="false"> |
| 28 | - <component v-for="(item, index) in visible_form_data" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="index" | 28 | + <component v-for="(item, index) in visible_form_data" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="item.key" |
| 29 | :is="item.component" :item="item" @active="onActive" @remove="onRemove" @blur="onBlur" /> | 29 | :is="item.component" :item="item" @active="onActive" @remove="onRemove" @blur="onBlur" /> |
| 30 | </van-cell-group> | 30 | </van-cell-group> |
| 31 | <pagination-field | 31 | <pagination-field | ... | ... |
-
Please register or login to post a comment