diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
index 99983f636e..5f746b0c68 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
@@ -27,7 +27,7 @@
       <template v-if="datasourcesList.length">
         <m-list :datasources-list="datasourcesList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!datasourcesList.length">
@@ -108,6 +108,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       /**
        * conditions event
        */
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
index 84e59d5d2d..a33c01f54e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
@@ -29,7 +29,7 @@
       <template v-if="processListP.length">
         <m-list :process-list="processListP" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!processListP.length">
@@ -84,6 +84,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       /**
        * conditions
        */
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
index f57f90aa79..82bf32e051 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
@@ -140,7 +140,7 @@
           </table>
         </div>
         <div class="page-box">
-          <x-page :current="pageNo" :total="total" show-elevator @on-change="_page"></x-page>
+          <x-page :current="pageNo" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!list.length">
@@ -207,6 +207,10 @@
         this.pageNo = val
         this._getScheduleList()
       },
+      _pageSize (val) {
+        this.pageSize = val
+        this._getScheduleList()
+      },
       /**
        * Inquire list
        */
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
index 22c6656698..5c628a1d47 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
@@ -24,7 +24,7 @@
         <m-list :process-instance-list="processInstanceList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
         </m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!processInstanceList.length">
@@ -94,6 +94,11 @@
         setUrlParams(this.searchParams)
         this._debounceGET()
       },
+      _pageSize(val) {
+        this.searchParams.pageSize = val
+        setUrlParams(this.searchParams)
+        this._debounceGET()
+      },
       /**
        * get list data
        */
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
index 9e191c2784..a3f4f5d90e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
@@ -27,7 +27,7 @@
       <template v-if="projectsList.length">
         <m-list :projects-list="projectsList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!projectsList.length">
@@ -78,6 +78,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       _create (item) {
         let self = this
         let modal = this.$modal.dialog({
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/index.vue
index b48427666f..a6e0f9fba6 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/index.vue
@@ -31,7 +31,7 @@
         <m-list :file-resources-list="fileResourcesList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
         </m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!fileResourcesList.length">
@@ -85,6 +85,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       _getList (flag) {
         this.isLoading = !flag
         this.getResourcesListP(this.searchParams).then(res => {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/index.vue
index 13d1a8309e..c04018aed7 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/index.vue
@@ -28,7 +28,7 @@
         <m-list :udf-func-list="udfFuncList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize" @on-update="_updateList">
         </m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!udfFuncList.length">
@@ -75,6 +75,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       _create () {
         let self = this
         let modal = this.$modal.dialog({
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/index.vue
index 19c4367eff..e4f76e3409 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/index.vue
@@ -28,7 +28,7 @@
         <m-list :udf-resources-list="udfResourcesList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
         </m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!udfResourcesList.length">
@@ -82,6 +82,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       _updateList () {
         this.searchParams.pageNo = 1
         this.searchParams.searchVal = ''
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/index.vue
index 5acb0b264d..358e9ab480 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/index.vue
@@ -32,7 +32,7 @@
 
         </m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!queueList.length">
@@ -83,6 +83,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       _onEdit (item) {
         this._create(item)
       },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue
index 322ae4837c..d15a2c6fa2 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue
@@ -32,7 +32,7 @@
 
         </m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!tenementList.length">
@@ -83,6 +83,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       _onEdit (item) {
         this._create(item)
       },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/index.vue
index 22fdec9b43..b457dcb5a0 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/index.vue
@@ -32,7 +32,7 @@
 
         </m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!userList.length">
@@ -81,6 +81,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       _onEdit (item) {
         this._create(item)
       },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue
index c85cdd1514..9e4943c424 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue
@@ -32,7 +32,7 @@
 
         </m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!alertgroupList.length">
@@ -83,6 +83,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       _onEdit (item) {
         this._create(item)
       },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/index.vue
index 9b640650a7..9bdc354114 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/index.vue
@@ -31,7 +31,7 @@
                 :page-size="searchParams.pageSize">
         </m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!workerGroupList.length">
@@ -82,6 +82,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       _onEdit (item) {
         this._create(item)
       },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue
index dba0c950d5..f4044d5b8f 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue
@@ -32,7 +32,7 @@
 
         </m-list>
         <div class="page-box">
-          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
         </div>
       </template>
       <template v-if="!tokenList.length">
@@ -82,6 +82,9 @@
       _page (val) {
         this.searchParams.pageNo = val
       },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
       _onEdit (item) {
         this._create(item)
       },