diff --git a/backend/src/main/java/io/metersphere/service/TestCaseService.java b/backend/src/main/java/io/metersphere/service/TestCaseService.java
index dc167c2a55..1edab7a634 100644
--- a/backend/src/main/java/io/metersphere/service/TestCaseService.java
+++ b/backend/src/main/java/io/metersphere/service/TestCaseService.java
@@ -224,7 +224,7 @@ public class TestCaseService {
     }
 
     private List<TestCaseExcelData> generateExportTemplate() {
-        List<TestCaseExcelData> list = new ArrayList<TestCaseExcelData>();
+        List<TestCaseExcelData> list = new ArrayList<>();
         StringBuilder path = new StringBuilder("");
         List<String> types = Arrays.asList("functional", "performance", "api");
         List<String> methods = Arrays.asList("manual", "auto");
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index d87ed3f552..3840c28ee4 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -89,23 +89,8 @@
         </el-table-column>
       </el-table>
 
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                           :total="total"/>
 
     </el-card>
   </el-main>
@@ -116,22 +101,21 @@
   import MsCreateBox from '../../../settings/CreateBox';
   import TestCaseImport from '../components/TestCaseImport';
   import TestCaseExport from '../components/TestCaseExport';
+  import MsTablePagination from '../../../../components/common/pagination/TablePagination';
+
 
   export default {
     name: "TestCaseList",
-    components: {MsCreateBox, TestCaseImport, TestCaseExport},
+    components: {MsCreateBox, TestCaseImport, TestCaseExport, MsTablePagination},
     data() {
       return {
         result: {},
         deletePath: "/test/case/delete",
         condition: "",
         tableData: [],
-        multipleSelection: [],
         currentPage: 1,
         pageSize: 5,
         total: 0,
-        loadingRequire: {project: true, testCase: true},
-        testId: null
       }
       },
       props: {
@@ -157,7 +141,6 @@
           if (this.currentProject) {
             param.projectId = this.currentProject.id;
             this.result = this.$post(this.buildPagePath('/test/case/list'), param, response => {
-              this.loadingRequire.testCase = false;
               let data = response.data;
               this.total = data.itemCount;
               this.tableData = data.listObject;
@@ -173,17 +156,6 @@
         testCaseCreate() {
           this.$emit('openTestCaseEditDialog');
         },
-        handleSizeChange(size) {
-          this.pageSize = size;
-          this.initTableData();
-        },
-        handleCurrentChange(current) {
-          this.currentPage = current;
-          this.initTableData();
-        },
-        handleSelectionChange(val) {
-          this.multipleSelection = val;
-        },
         handleEdit(testCase) {
           this.$emit('testCaseEdit', testCase);
         },
diff --git a/frontend/src/business/components/track/plan/components/TestPlanList.vue b/frontend/src/business/components/track/plan/components/TestPlanList.vue
index d6a4c1b6d3..006e28bffa 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanList.vue
@@ -16,7 +16,7 @@
                       <el-input type="text" size="small" :placeholder="$t('load_test.search_by_name')"
                                 prefix-icon="el-icon-search"
                                 maxlength="60"
-                                v-model="condition" @change="search" clearable/>
+                                v-model="condition" @change="initTableData" clearable/>
                     </span>
               </el-col>
             </el-row>
@@ -88,23 +88,25 @@
           </el-table-column>
         </el-table>
 
-        <div>
-          <el-row>
-            <el-col :span="22" :offset="1">
-              <div class="table-page">
-                <el-pagination
-                  @size-change="handleSizeChange"
-                  @current-change="handleCurrentChange"
-                  :current-page.sync="currentPage"
-                  :page-sizes="[5, 10, 20, 50, 100]"
-                  :page-size="pageSize"
-                  layout="total, sizes, prev, pager, next, jumper"
-                  :total="total">
-                </el-pagination>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
+        <!--<div>-->
+          <!--<el-row>-->
+            <!--<el-col :span="22" :offset="1">-->
+              <!--<div class="table-page">-->
+                <!--<el-pagination-->
+                  <!--@size-change="handleSizeChange"-->
+                  <!--@current-change="handleCurrentChange"-->
+                  <!--:current-page.sync="currentPage"-->
+                  <!--:page-sizes="[5, 10, 20, 50, 100]"-->
+                  <!--:page-size="pageSize"-->
+                  <!--layout="total, sizes, prev, pager, next, jumper"-->
+                  <!--:total="total">-->
+                <!--</el-pagination>-->
+              <!--</div>-->
+            <!--</el-col>-->
+          <!--</el-row>-->
+        <!--</div>-->
+        <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                             :total="total"/>
 
       </el-card>
     </el-main>
@@ -113,22 +115,21 @@
 
 <script>
   import MsCreateBox from '../../../settings/CreateBox';
+  import MsTablePagination from '../../../../components/common/pagination/TablePagination';
 
   export default {
       name: "TestPlanList",
-      components: {MsCreateBox},
+      components: {MsCreateBox, MsTablePagination},
       data() {
         return {
           result: {},
           queryPath: "/test/plan/list",
           deletePath: "/test/plan/delete",
           condition: "",
-          tableData: [],
-          multipleSelection: [],
           currentPage: 1,
           pageSize: 5,
           total: 0,
-          testId: null,
+          tableData: [],
         }
       },
       created() {
@@ -146,26 +147,12 @@
             this.tableData = data.listObject;
           });
         },
-        search() {
-          this.initTableData();
-        },
         buildPagePath(path) {
           return path + "/" + this.currentPage + "/" + this.pageSize;
         },
         testPlanCreate() {
           this.$emit('openTestPlanEditDialog');
         },
-        handleSizeChange(size) {
-          this.pageSize = size;
-          this.initTableData();
-        },
-        handleCurrentChange(current) {
-          this.currentPage = current;
-          this.initTableData();
-        },
-        handleSelectionChange(val) {
-          this.multipleSelection = val;
-        },
         handleEdit(testPlan) {
           this.$emit('testPlanEdit', testPlan);
         },
diff --git a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue b/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
index be808c83df..5c09a6d47c 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanTestCaseList.vue
@@ -44,7 +44,7 @@
                     <el-input type="text" size="small" :placeholder="$t('load_test.search_by_name')"
                               prefix-icon="el-icon-search"
                               maxlength="60"
-                              v-model="condition.name" @change="search" clearable/>
+                              v-model="condition.name" @change="initTableData" clearable/>
                   </span>
             </el-col>
           </el-row>
@@ -137,23 +137,8 @@
         </el-table-column>
       </el-table>
 
-      <div>
-        <el-row>
-          <el-col :span="22" :offset="1">
-            <div class="table-page">
-              <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage"
-                :page-sizes="[5, 10, 20, 50, 100]"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="total">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                           :total="total"/>
 
     </el-card>
   </el-main>
@@ -164,11 +149,12 @@
   import ExecutorEdit from './ExecutorEdit';
   import StatusEdit from './StatusEdit';
   import MsTipButton from '../../../../components/common/components/MsTipButton';
+  import MsTablePagination from '../../../../components/common/pagination/TablePagination';
   import {TokenKey} from '../../../../../common/js/constants';
 
   export default {
       name: "TestPlanTestCaseList",
-      components: {PlanNodeTree, StatusEdit, ExecutorEdit, MsTipButton},
+      components: {PlanNodeTree, StatusEdit, ExecutorEdit, MsTipButton, MsTablePagination},
       data() {
         return {
           result: {},
@@ -176,13 +162,10 @@
           condition: {},
           showMyTestCase: false,
           tableData: [],
-          multipleSelection: [],
           currentPage: 1,
           pageSize: 5,
           total: 0,
           selectIds: new Set(),
-          loadingRequire: {project: true, testCase: true},
-          testId: null
         }
       },
       props:{
@@ -206,27 +189,15 @@
             param.nodeIds = nodeIds;
             param.planId = this.planId;
             this.result = this.$post(this.buildPagePath('/test/plan/case/list'), param, response => {
-              this.loadingRequire.testCase = false;
               let data = response.data;
               this.total = data.itemCount;
               this.tableData = data.listObject;
             });
           }
         },
-        search() {
-          this.initTableData();
-        },
         buildPagePath(path) {
           return path + "/" + this.currentPage + "/" + this.pageSize;
         },
-        handleSizeChange(size) {
-          this.pageSize = size;
-          this.initTableData();
-        },
-        handleCurrentChange(current) {
-          this.currentPage = current;
-          this.initTableData();
-        },
         handleEdit(testCase) {
           this.$emit('editTestPlanTestCase', testCase);
         },
@@ -267,9 +238,6 @@
             this.selectIds.add(row.id);
           }
         },
-        clearSelected() {
-          this.selectIds.clear();
-        },
         handleBatch(type){
           if (this.selectIds.size < 1) {
             this.$message.warning('请选择需要操作的数据');