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

重构分页逻辑，将原始分页数据与过滤后的分页数据分离
添加对分页变化的监听，自动调整当前页索引和分页状态

 <!--
 <!--
  * @Date: 2022-07-18 10:22:22
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @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
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
@@ -28,7 +28,7 @@
           <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="index"
             :is="item.component" :item="item" @active="onActive" @remove="onRemove" @blur="onBlur" />
             :is="item.component" :item="item" @active="onActive" @remove="onRemove" @blur="onBlur" />
         </van-cell-group>
         </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">
         <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">
           <van-button round block type="primary" native-type="submit" :disabled="submitStatus">
@@ -240,13 +240,23 @@ const PCommit = ref({});
  * 表单结构数据
  * 表单结构数据
  */
  */
 const formData = ref([]);
 const formData = ref([]);
-const pages = ref([]);
+const pages_raw = ref([]);
 // 分页配置
 // 分页配置
 const enable_pagination = ref(false);
 const enable_pagination = ref(false);
 const current_page_index = ref(0);
 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(() => {
 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 visible_form_data = computed(() => {
   const set = new Set(visible_keys.value);
   const set = new Set(visible_keys.value);
@@ -491,10 +501,10 @@ onMounted(async () => {
 
 
   formData.value = formatData(page_form);
   formData.value = formatData(page_form);
   /**
   /**
-   * * TAG: 构建分页
+   * * TAG: 构建分页组件
    */
    */
   buildPages();
   buildPages();
-  enable_pagination.value = pages.value.length > 1;
+  enable_pagination.value = filtered_pages.value.length > 1;
   /**** END ****/
   /**** END ****/
 
 
   // TAG：获取原来表单数据
   // 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 = () => {
 const setupFieldWatchers = () => {
@@ -1429,7 +1452,7 @@ const setVolunteerData = async (volunteer_phone) => {
   }
   }
 }
 }
 
 
-// 构建分页
+// 构建分页组件
 const buildPages = () => {
 const buildPages = () => {
   const result = [];
   const result = [];
   let cur = [];
   let cur = [];
@@ -1451,9 +1474,9 @@ const buildPages = () => {
     for (let i = 0; i < keys.length; i += size) {
     for (let i = 0; i < keys.length; i += size) {
       chunked.push(keys.slice(i, i + size));
       chunked.push(keys.slice(i, i + size));
     }
     }
-    pages.value = chunked.length ? chunked : [keys];
+    pages_raw.value = chunked.length ? chunked : [keys];
   } else {
   } else {
-    pages.value = result;
+    pages_raw.value = result;
   }
   }
 };
 };
 
 
@@ -1492,7 +1515,7 @@ const validateCurrentPage = async () => {
 const handleNext = async () => {
 const handleNext = async () => {
   const ok = await validateCurrentPage();
   const ok = await validateCurrentPage();
   if (!ok) return;
   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;
     current_page_index.value += 1;
     image_uploader.value = [];
     image_uploader.value = [];
     file_uploader.value = [];
     file_uploader.value = [];