hookehuyr

fix(分页): 修复分页组件中禁用字段仍显示的问题

重构分页逻辑,将原始分页数据与过滤后的分页数据分离
添加对分页变化的监听,自动调整当前页索引和分页状态
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-18 17:09:46
* @LastEditTime: 2025-11-18 18:02:29
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -28,7 +28,7 @@
<component v-for="(item, index) in visible_form_data" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="index"
:is="item.component" :item="item" @active="onActive" @remove="onRemove" @blur="onBlur" />
</van-cell-group>
<pagination-field v-if="enable_pagination" :current="current_page_index" :total="pages.length" :is-last="current_page_index === pages.length - 1" @prev="handlePrev" @next="handleNext" @submit="handleSubmit" />
<pagination-field v-if="enable_pagination" :current="current_page_index" :total="filtered_pages.length" :is-last="current_page_index === filtered_pages.length - 1" @prev="handlePrev" @next="handleNext" @submit="handleSubmit" />
<!-- 非流程版表单 -->
<div v-if="formData.length && PCommit.visible && !formSetting.is_flow && !enable_pagination" style="margin: 16px">
<van-button round block type="primary" native-type="submit" :disabled="submitStatus">
......@@ -240,13 +240,23 @@ const PCommit = ref({});
* 表单结构数据
*/
const formData = ref([]);
const pages = ref([]);
const pages_raw = ref([]);
// 分页配置
const enable_pagination = ref(false);
const current_page_index = ref(0);
const filtered_pages = computed(() => {
if (!pages_raw.value.length) {
const keys = formData.value.filter(i => !i.component_props?.disabled).map(i => i.key);
return [keys];
}
const result = pages_raw.value.map(keys => keys.filter(k => {
const f = formData.value.find(i => i.key === k);
return f && !f.component_props?.disabled;
})).filter(keys => keys.length > 0);
return result.length ? result : [[]];
});
const visible_keys = computed(() => {
if (!pages.value.length) return formData.value.map(i => i.key);
return pages.value[current_page_index.value] || [];
return filtered_pages.value[current_page_index.value] || [];
});
const visible_form_data = computed(() => {
const set = new Set(visible_keys.value);
......@@ -491,10 +501,10 @@ onMounted(async () => {
formData.value = formatData(page_form);
/**
* * TAG: 构建分页
* * TAG: 构建分页组件
*/
buildPages();
enable_pagination.value = pages.value.length > 1;
enable_pagination.value = filtered_pages.value.length > 1;
/**** END ****/
// TAG:获取原来表单数据
......@@ -1377,6 +1387,19 @@ watch(
}
);
// 监听分页变化,移除空页并纠正当前页索引与分页状态
watch(
() => filtered_pages.value,
(newPages) => {
const last = newPages.length - 1;
if (current_page_index.value > last) {
current_page_index.value = last >= 0 ? last : 0;
}
enable_pagination.value = newPages.length > 1;
},
{ flush: 'post' }
);
// 为每个表单字段创建单独的监听器
// 可以监听到简单组件的字段的值变化,自定义的组件无法监听到
const setupFieldWatchers = () => {
......@@ -1429,7 +1452,7 @@ const setVolunteerData = async (volunteer_phone) => {
}
}
// 构建分页
// 构建分页组件
const buildPages = () => {
const result = [];
let cur = [];
......@@ -1451,9 +1474,9 @@ const buildPages = () => {
for (let i = 0; i < keys.length; i += size) {
chunked.push(keys.slice(i, i + size));
}
pages.value = chunked.length ? chunked : [keys];
pages_raw.value = chunked.length ? chunked : [keys];
} else {
pages.value = result;
pages_raw.value = result;
}
};
......@@ -1492,7 +1515,7 @@ const validateCurrentPage = async () => {
const handleNext = async () => {
const ok = await validateCurrentPage();
if (!ok) return;
if (current_page_index.value < pages.value.length - 1) {
if (current_page_index.value < filtered_pages.value.length - 1) {
current_page_index.value += 1;
image_uploader.value = [];
file_uploader.value = [];
......