Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1bcafaeb 1 parent 5db10a97

fix(分页): 修复分页逻辑问题并优化导航配置 

修复过滤分页时错误剔除空页的问题，确保分页总数与分页符定义一致
优化分页导航配置，仅从分页符字段读取文案和状态
将循环中的key从index改为item.key以提高稳定性
Inline Side-by-side
Showing 2 changed files with 29 additions and 15 deletions
......@@ -16,10 +16,12 @@ export function usePagination(formDataRef, options = {}) {
// 当前页索引
const current_page_index = ref(0)
// 过滤后的分页：剔除被隐藏(disabled)的字段，以及空页
// 过滤后的分页：剔除被隐藏(disabled)的字段，但保留空页占位，确保分页总数与 paginator 一致
const filtered_pages = computed(() => {
if (!pages_raw.value.length) {
const keys = formDataRef.value.filter(i => !i.component_props?.disabled).map(i => i.key)
const keys = formDataRef.value
.filter(i => !i.component_props?.disabled && i.component_props?.tag !== 'paginator')
.map(i => i.key)
return [keys]
}
const result = pages_raw.value
......@@ -27,7 +29,7 @@ export function usePagination(formDataRef, options = {}) {
const f = formDataRef.value.find(i => i.key === k)
return f && !f.component_props?.disabled
}))
.filter(keys => keys.length > 0)
// 不再删除空页，以保证总页数符合分页符定义
return result.length ? result : [[]]
})
......@@ -47,15 +49,21 @@ export function usePagination(formDataRef, options = {}) {
const buildPages = () => {
const result = []
let cur = []
// 连续的 paginator 需要忽略，避免出现空分页
let last_was_paginator = false
formDataRef.value.forEach(item => {
const tag = item.component_props?.tag
// 分隔符 paginator 作为分页分组边界
if (tag === 'paginator') {
// 若前一个也是 paginator，则忽略本次（不产生空页）
if (last_was_paginator) return
if (cur.length) result.push(cur)
cur = []
last_was_paginator = true
return
}
cur.push(item.key)
last_was_paginator = false
})
if (cur.length) result.push(cur)
if (result.length <= 1) {
......@@ -84,21 +92,27 @@ export function usePagination(formDataRef, options = {}) {
{ flush: 'post' }
)
// 分页导航文案与禁用状态（按当前页字段的 component_props 提供的 mock 值）
/**
* 分页导航配置
* @description 仅从 tag 为 paginator 的字段中读取导航文案与可返回状态
* @returns {{prev_text: string, next_text: string, prev_disabled: boolean}}
*/
const page_nav = computed(() => {
const idx = current_page_index.value
const keys = filtered_pages.value[idx] || []
// 默认文案与状态
let prev_text = '上一页'
let next_text = '下一页'
let prev_disabled = false
for (let k of keys) {
const item = formDataRef.value.find(i => i.key === k)
if (item && item.component_props) {
if (item.component_props.back_title) prev_text = item.component_props.back_title
if (item.component_props.next_title) next_text = item.component_props.next_title
if (typeof item.component_props.is_back === 'boolean') prev_disabled = item.component_props.is_back
}
// 仅查找 tag=paginator 的字段并提取其 component_props
const paginator_item = formDataRef.value.find(i => i?.component_props?.tag === 'paginator')
if (paginator_item && paginator_item.component_props) {
const props = paginator_item.component_props
if (props.back_title) prev_text = props.back_title
if (props.next_title) next_text = props.next_title
// is_back 表示是否允许返回
if (typeof props.is_back === 'boolean') prev_disabled = !props.is_back
}
return { prev_text, next_text, prev_disabled }
})
......
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-19 00:06:00
* @LastEditTime: 2025-11-19 18:04:59
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -25,7 +25,7 @@
<van-config-provider :theme-vars="themeVars">
<van-form ref="myForm" @submit="onSubmit" @failed="onFailed" :scroll-to-error="true">
<van-cell-group :border="false">
<component v-for="(item, index) in visible_form_data" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="index"
<component v-for="(item, index) in visible_form_data" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="item.key"
:is="item.component" :item="item" @active="onActive" @remove="onRemove" @blur="onBlur" />
</van-cell-group>
<pagination-field
......