refactor(分页): 优化过滤分页逻辑并同步导航配置
过滤分页时移除空页并保持导航配置同步,确保仅对有内容的页显示导航
Showing
1 changed file
with
34 additions
and
3 deletions
| ... | @@ -18,20 +18,26 @@ export function usePagination(formDataRef, options = {}) { | ... | @@ -18,20 +18,26 @@ export function usePagination(formDataRef, options = {}) { |
| 18 | // 每一页的导航配置(由相邻的 paginator 控件决定) | 18 | // 每一页的导航配置(由相邻的 paginator 控件决定) |
| 19 | const page_nav_props_by_index = ref([]) | 19 | const page_nav_props_by_index = ref([]) |
| 20 | 20 | ||
| 21 | - // 过滤后的分页:剔除被隐藏(disabled)的字段,但保留空页占位,确保分页总数与 paginator 一致 | 21 | + /** |
| 22 | + * 过滤后的分页 | ||
| 23 | + * @description 剔除被隐藏(disabled)的字段,并移除过滤后为空的页,确保分页总数只计算有内容的页 | ||
| 24 | + */ | ||
| 22 | const filtered_pages = computed(() => { | 25 | const filtered_pages = computed(() => { |
| 26 | + // 未构建分页时,直接按当前可见字段返回单页 | ||
| 23 | if (!pages_raw.value.length) { | 27 | if (!pages_raw.value.length) { |
| 24 | const keys = formDataRef.value | 28 | const keys = formDataRef.value |
| 25 | .filter(i => !i.component_props?.disabled && i.component_props?.tag !== 'paginator') | 29 | .filter(i => !i.component_props?.disabled && i.component_props?.tag !== 'paginator') |
| 26 | .map(i => i.key) | 30 | .map(i => i.key) |
| 27 | return [keys] | 31 | return [keys] |
| 28 | } | 32 | } |
| 33 | + // 根据原始分页分组过滤出可见字段,并移除空页 | ||
| 29 | const result = pages_raw.value | 34 | const result = pages_raw.value |
| 30 | .map(keys => keys.filter(k => { | 35 | .map(keys => keys.filter(k => { |
| 31 | const f = formDataRef.value.find(i => i.key === k) | 36 | const f = formDataRef.value.find(i => i.key === k) |
| 32 | return f && !f.component_props?.disabled | 37 | return f && !f.component_props?.disabled |
| 33 | })) | 38 | })) |
| 34 | - // 不再删除空页,以保证总页数符合分页符定义 | 39 | + .filter(keys => keys.length > 0) |
| 40 | + // 兜底:若全部为空,则保留一个空页以维持形态 | ||
| 35 | return result.length ? result : [[]] | 41 | return result.length ? result : [[]] |
| 36 | }) | 42 | }) |
| 37 | 43 | ||
| ... | @@ -129,9 +135,34 @@ export function usePagination(formDataRef, options = {}) { | ... | @@ -129,9 +135,34 @@ export function usePagination(formDataRef, options = {}) { |
| 129 | * @description 根据当前页索引读取对应的分页符导航文案与返回控制 | 135 | * @description 根据当前页索引读取对应的分页符导航文案与返回控制 |
| 130 | * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}} | 136 | * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}} |
| 131 | */ | 137 | */ |
| 138 | + /** | ||
| 139 | + * 过滤后的分页导航 | ||
| 140 | + * @description 与 filtered_pages 同步,仅为有内容的页保留对应的导航配置 | ||
| 141 | + */ | ||
| 142 | + const filtered_nav_props_by_index = computed(() => { | ||
| 143 | + // 未构建分页时使用默认导航 | ||
| 144 | + if (!pages_raw.value.length) { | ||
| 145 | + return [normalizePaginatorProps()] | ||
| 146 | + } | ||
| 147 | + // 与过滤页一一对应:仅保留含可见字段的页的导航 | ||
| 148 | + const visible_navs = [] | ||
| 149 | + pages_raw.value.forEach((keys, idx) => { | ||
| 150 | + const hasVisible = keys.some(k => { | ||
| 151 | + const f = formDataRef.value.find(i => i.key === k) | ||
| 152 | + return f && !f.component_props?.disabled | ||
| 153 | + }) | ||
| 154 | + if (hasVisible) visible_navs.push(page_nav_props_by_index.value[idx] || normalizePaginatorProps()) | ||
| 155 | + }) | ||
| 156 | + return visible_navs.length ? visible_navs : [normalizePaginatorProps()] | ||
| 157 | + }) | ||
| 158 | + | ||
| 159 | + /** | ||
| 160 | + * 分页导航配置(与过滤后页索引一致) | ||
| 161 | + * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}} | ||
| 162 | + */ | ||
| 132 | const page_nav = computed(() => { | 163 | const page_nav = computed(() => { |
| 133 | const def = normalizePaginatorProps() | 164 | const def = normalizePaginatorProps() |
| 134 | - return page_nav_props_by_index.value[current_page_index.value] || def | 165 | + return filtered_nav_props_by_index.value[current_page_index.value] || def |
| 135 | }) | 166 | }) |
| 136 | 167 | ||
| 137 | /** | 168 | /** | ... | ... |
-
Please register or login to post a comment