fix(Pagination): 修复简洁型无效分页数据无法更新的问题

WeBankFinTech · Oct 17, 2024 · 7fefcb8 · 7fefcb8
1 parent 68b172f
commit 7fefcb8
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/components/pagination/simpler.tsx b/components/pagination/simpler.tsx
@@ -1,6 +1,7 @@
 import {
     type ComponentObjectPropsOptions,
     defineComponent,
+    ref,
     toRefs,
     watch,
 } from 'vue';
@@ -37,6 +38,9 @@ export default defineComponent({
 
         const [currentPage, updateCurrentPage] = useNormalModel(props, emit);
 
+        // 这里单独定义响应式变量，用 modelValue={currentPage.value} 的方式，会导致无效数据重复赋值可能内部不更新的情况
+        const innerCurrent = ref();
+
         const handleCurrentChange = (current: number) => {
             let temp = 0;
             if (current < 1) {
@@ -49,8 +53,8 @@ export default defineComponent({
             updateCurrentPage(temp);
         };
 
-        // 处理输入页码的事件
-        const handleInputChange = (val: string) => {
+        // 处理输入页码 change 事件
+        const handleChange = (val: string) => {
             // 如果用户输入是非数字的字符，则不做任何行为
             const inputValue = Number(val);
             if (Number.isNaN(inputValue)) {
@@ -64,6 +68,11 @@ export default defineComponent({
                 updateCurrentPage(total.value);
             }
         });
+        watch(currentPage, () => {
+            innerCurrent.value = currentPage.value;
+        }, {
+            immediate: true,
+        });
 
         return () => (
             <div class={`${prefixCls}-pager ${prefixCls}-simpler`}>
@@ -81,8 +90,8 @@ export default defineComponent({
                 {/* 当前页面页码 */}
                 <InputInner
                     class={`${prefixCls}-jumper-input`}
-                    modelValue={currentPage.value}
-                    onChange={handleInputChange}
+                    v-model={innerCurrent.value}
+                    onChange={handleChange}
                 ></InputInner>
                 <div class={`${prefixCls}-simpler-total`}>
                     <i class={`${prefixCls}-simpler-total-split`}>/</i>