添加分页

src/views/kpi/set/target/index.vue

@@ -105,10 +105,12 @@
             </el-table-column>
           </el-table>
         </div>
+        <div class="target-main-content-handle">
           <div
             @click="menuDataClasseHide = !menuDataClasseHide"
-          class="target-main-content-hide"
+            class="target-main-content-handle-hide"
           ><i :class="menuDataClasseHide?'el-icon-arrow-right':'el-icon-arrow-left'"></i></div>
+        </div>
         <div class="target-main-content-right">
           <el-table
             :data="tableData"
@@ -146,6 +148,18 @@
               </template>
             </el-table-column>
           </el-table>
+          <el-pagination
+            v-if="this.tablePage.currPage>1"
+            @size-change="handlePageSizeChange"
+            @current-change="handlePageCurrentChange"
+            :current-page.sync="tablePage.currPage"
+            :page-size="tablePage.pageSize"
+            :page-sizes="[20,50,100]"
+            layout="sizes, prev, pager, next"
+            :total="tablePage.totalCount"
+            class="target-main-content-right-page"
+          >
+          </el-pagination>
         </div>
       </div>
     </div>
@@ -351,7 +365,15 @@ export default {
       this.queryData.type = val ? val.id : -1
       this.handleGetMenuList(this.queryData.type)
     },
-
+    handlePageCurrentChange (val) {
+      // 页面
+      this.tablePage.currPage = val
+      this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name, val)
+    },
+    handlePageSizeChange (val) {
+      this.tablePage.pageSize = val
+      this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name, this.tablePage.currPage)
+    },
     handleGetMenuList (type = -1) {
       // type 类型
       // 指标分类列表
@@ -388,7 +410,7 @@ export default {
       this.queryData.indicatorType = indicatorType
       let para = {
         currPage: currPage,
-        pageSize: 20,
+        pageSize: this.tablePage.pageSize,
         name: name
       }
       if (indicatorType !== -1) {
@@ -499,27 +521,36 @@ export default {
     &-content {
       display: flex;
       justify-content: space-between;
-      align-items: center;
       margin-top: 20px;
       overflow: hidden;
 
       &-left {
         display: flex;
         .el-table {
+          width: 200px;
           border: 0.5px solid @borderColor;
         }
       }
+      &-handle {
+        display: flex;
+        align-items: center;
         &-hide {
           color: #fff;
           background-color: @borderColor;
           width: 12px;
           height: 20px;
+          margin-right: 10px;
           border-bottom-right-radius: 2px;
           border-top-right-radius: 2px;
         }
+      }
       &-right {
         flex: 1;
-        border: red;
+        &-page {
+          flex: 1;
+          text-align: center;
+          margin-top: 10px;
+        }
       }
     }
   }