Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
data-table
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2025-11-18 18:02:52 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
02d1efdd2dfcfef8ca5118a54de3cac3bd7bb4dc
02d1efdd
1 parent
18671cea
fix(分页): 修复分页组件中禁用字段仍显示的问题
重构分页逻辑,将原始分页数据与过滤后的分页数据分离 添加对分页变化的监听,自动调整当前页索引和分页状态
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
34 additions
and
11 deletions
src/views/index.vue
src/views/index.vue
View file @
02d1efd
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-18 1
7:09:46
* @LastEditTime: 2025-11-18 1
8: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 = [];
...
...
Please
register
or
login
to post a comment