From a8a8cd8f0897fe2c27d32fe8db682a15fb8c73a3 Mon Sep 17 00:00:00 2001
From: ioslh <ohislh@gmail.com>
Date: Wed, 9 Feb 2022 18:28:39 +0800
Subject: [PATCH] fix(docs): [pagination] example bugfix according to new usage
 (#5833)

---
 docs/examples/pagination/more-elements.vue | 9 ++++++---
 packages/tokens/pagination.ts              | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/examples/pagination/more-elements.vue b/docs/examples/pagination/more-elements.vue
index 42bfbaaaa8..c1a0431076 100644
--- a/docs/examples/pagination/more-elements.vue
+++ b/docs/examples/pagination/more-elements.vue
@@ -34,8 +34,8 @@
     <div class="demonstration">Change page size</div>
     <el-pagination
       v-model:currentPage="currentPage2"
+      v-model:page-size="pageSize2"
       :page-sizes="[100, 200, 300, 400]"
-      :page-size="100"
       :small="small"
       :disabled="disabled"
       :background="background"
@@ -50,7 +50,7 @@
     <div class="demonstration">Jump to</div>
     <el-pagination
       v-model:currentPage="currentPage3"
-      :page-size="100"
+      v-model:page-size="pageSize3"
       :small="small"
       :disabled="disabled"
       :background="background"
@@ -65,8 +65,8 @@
     <div class="demonstration">All combined</div>
     <el-pagination
       v-model:currentPage="currentPage4"
+      v-model:page-size="pageSize4"
       :page-sizes="[100, 200, 300, 400]"
-      :page-size="100"
       :small="small"
       :disabled="disabled"
       :background="background"
@@ -85,6 +85,9 @@ const currentPage1 = ref(5)
 const currentPage2 = ref(5)
 const currentPage3 = ref(5)
 const currentPage4 = ref(4)
+const pageSize2 = ref(100)
+const pageSize3 = ref(100)
+const pageSize4 = ref(100)
 const small = ref(false)
 const background = ref(false)
 const disabled = ref(false)
diff --git a/packages/tokens/pagination.ts b/packages/tokens/pagination.ts
index 2fb9f76c02..cecefc5e5f 100644
--- a/packages/tokens/pagination.ts
+++ b/packages/tokens/pagination.ts
@@ -1,7 +1,7 @@
-import type { InjectionKey, ComputedRef } from 'vue'
+import type { InjectionKey, ComputedRef, WritableComputedRef } from 'vue'
 
 export interface ElPaginationContext {
-  currentPage?: ComputedRef<number>
+  currentPage?: WritableComputedRef<number>
   pageCount?: ComputedRef<number>
   disabled?: ComputedRef<boolean>
   changeEvent?: (val: number) => void