优化table数据过多造成卡顿问题

src/pages/processCenter/pages/creatProcess/xmpg2/step6.vue

@@ -49,11 +49,12 @@
           </div>
         </div>
         <el-table
-          :data="dataList"
-          style="width: 100%; border: 1px solid #cccccc"
+          :data="dataList.slice((currentPage - 1) * pageSize, currentPage * pageSize ) "
+          style="width: 100%; border: 1px solid #cccccc;height: 400px"
           row-key="standId"
           height="70%"
           border
+          highlight-current-row
           @selection-change="selectStandChange"
           :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
           fontWeight: 'bold'}"
@@ -72,7 +73,8 @@
           >
             <template slot-scope="scope">
               <a v-if="scope.row.standYear" class="table-jump"
-                 @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standNumber
+                 @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{
+                  scope.row.standNumber
                 }}-{{ scope.row.standYear }}</a>
               <a v-else @click="handlePreview(scope.row)" class="table-jump">{{ scope.row.standSort }}
                 {{ scope.row.standNumber }}</a>
@@ -255,6 +257,14 @@
           <!--            </template>-->
           <!--          </el-table-column>-->
         </el-table>
+        <el-pagination
+          layout="total,sizes, prev, pager, next"
+          background
+          :page-sizes="[20, 40, 60]"
+          :total="total"
+          @current-change="handleCurrentChange"
+        >
+        </el-pagination>
       </div>
       <div>
         <el-collapse accordion>
@@ -422,8 +432,11 @@
         </el-form>
       </div>
       <div class="demo-drawer-footer">
-        <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveBatchEditForm">确定</el-button>
-        <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancelBatchEditForm">取消</el-button>
+        <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveBatchEditForm">
+          确定
+        </el-button>
+        <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancelBatchEditForm">取消
+        </el-button>
       </div>
     </el-drawer>
   </div>
@@ -444,6 +457,9 @@ export default {
   },
   data() {
     return {
+      total: 0,
+      currentPage: 1,
+      pageSize: 20,
       nodeList: [],
       isTransfer: false,
       // 调整处理人抽屉状态
@@ -696,7 +712,6 @@ export default {
           pId: this.pId
         }).then(res => {
           if (res) {
-            console.log(res.mesg);
             const processForm = JSON.parse(res.mesg);
             this.getFormFieldList(processForm);
           }
@@ -713,15 +728,27 @@ export default {
           this.listForm.prcName = this.prcName;
           this.listForm["id"] = item.id;
           // this.listForm.dataList = item.dataList;
-          this.dataList = this.listForm.dataList;
-          console.log(this.dataList);
+          this.dataList = this.listForm.dataList[0].children
+          this.dataList.map(item => {
+            this.$set(item, 'standName', this.listForm.dataList[0].standName)
+            this.$set(item, 'standEnName', this.listForm.dataList[0].standEnName)
+            this.$set(item, 'standYear', this.listForm.dataList[0].standYear)
+            this.$set(item, 'standSort', this.listForm.dataList[0].standSort)
+            this.$set(item, 'standNumber', this.listForm.dataList[0].standNumber)
+          })
+          this.total = this.listForm.dataList[0].children.length;
         } else {
           this.listForm = item.form;
-          this.dataList = item.form.dataList;
+          this.dataList = item.form.dataList[0].children
+          this.total = item.form.dataList[0].children.length;
         }
 
       });
     },
+    // 分页
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage;
+    },
     //保存事件
     handleSave() {
       this.saveLoading = true;
@@ -874,9 +901,11 @@ export default {
   .demo-drawer-content {
     margin-top: 10px;
   }
+
   /deep/ .el-table th > .cell {
     font-size: 12px;
   }
+
   /deep/ .el-table thead.is-group th {
     padding: 0px;
   }