室内月分析分页

src/views/component/qualityControl/indexChuanBei.vue

@@ -16,12 +16,16 @@
     </div>
     <div class="table">
       <el-table
-        :data="tableData"
+        :data="showPaperList"
         border
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" />
-        <el-table-column label="序号" width="50" type="index" />
+        <el-table-column label="序号" width="50">
+          <template slot-scope="{ row, $index }">
+            {{ (currentPage - 1) * pageSize + $index + 1 }}</template
+          >
+        </el-table-column>
         <el-table-column label="项目" prop="xiangMu" width="160" />
         <el-table-column label="设备名称" prop="sheBeiMingCheng" width="160" />
         <el-table-column label="质控批号" prop="zhiKongPinPiHao" width="100" />
@@ -75,6 +79,16 @@
           </template>
         </el-table-column>
       </el-table>
+      <el-pagination
+        style="margin-top: 5px; padding-bottom: 10px"
+        :current-page="currentPage"
+        :page-sizes="[10, 15, 20, 30, 50, 100]"
+        :page-size="pageSize"
+        layout="total,sizes,prev,pager,next"
+        :total="tableData.length"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
     </div>
     <input
       id=""
@@ -98,6 +112,10 @@ export default {
       type: Object,
       default: () => {}
     },
+    params: {
+      type: Object,
+      default: () => {}
+    },
     readonly: {
       type: Boolean,
       default: false
@@ -107,6 +125,8 @@ export default {
     return {
       tableData: [],
       multipleSelection: [],
+      pageSize: 10,
+      currentPage: 1,
       columns: {
         xiangMu: '项目',
         sheBeiMingCheng: '设备名称',
@@ -143,6 +163,12 @@ export default {
     }
   },
   computed: {
+    // 分页结果
+    showPaperList() {
+      const start = (this.currentPage - 1) * this.pageSize
+      const end = start + this.pageSize
+      return this.tableData.slice(start, end)
+    },
     shiFouGuoShen() {
       if (
         !this.formData.shiFouGuoShen ||
@@ -342,6 +368,7 @@ export default {
           this.tableData = this.tableData.filter(
             (item) => !this.multipleSelection.includes(item)
           )
+          this.currentPage = 1
         })
         .catch(() => {})
     },
@@ -350,6 +377,86 @@ export default {
         '.dynamic-form-table .ibps-icon-edit'
       )
       btns[Math.floor(btns.length / 2) + $index].click()
+    },
+
+    onPageClick(number) {
+      const btns = document.querySelectorAll(
+        '.dynamic-form-table .el-pager .number'
+      )
+      if (btns[0].innerText == this.currentPage) {
+        btns[0].click()
+      }
+      if (btns[1].innerText == this.currentPage) {
+        btns[1].click()
+      }
+      if (btns[2].innerText == this.currentPage) {
+        btns[2].click()
+      }
+      if (btns[3].innerText == this.currentPage) {
+        btns[3].click()
+      }
+      if (btns[4].innerText == this.currentPage) {
+        btns[4].click()
+      }
+      if (btns[5].innerText == this.currentPage) {
+        btns[5].click()
+      }
+      if (btns[6].innerText == this.currentPage) {
+        btns[6].click()
+      }
+
+      const butprev = document.querySelectorAll(
+        '.dynamic-form-table .el-pager .btn-quickprev'
+      )
+      if (
+        this.currentPage < Number(btns[1].innerText) &&
+        this.currentPage !== Number(btns[0].innerText)
+      ) {
+        butprev[0].click()
+      }
+      const butnext = document.querySelectorAll(
+        '.dynamic-form-table .el-pager .btn-quicknext'
+      )
+      if (
+        this.currentPage > Number(btns[5].innerText) &&
+        this.currentPage !== Number(btns[6].innerText)
+      ) {
+        butnext[0].click()
+      }
+    },
+    onSizeClick() {
+      const names = document.querySelectorAll(
+        '.dynamic-form-table .el-popper .el-select-dropdown__item'
+      )
+      if (names[0].innerText == this.pageSize + '条/页') {
+        names[0].click()
+      }
+      if (names[1].innerText == this.pageSize + '条/页') {
+        names[1].click()
+      }
+      if (names[2].innerText == this.pageSize + '条/页') {
+        names[2].click()
+      }
+      if (names[3].innerText == this.pageSize + '条/页') {
+        names[3].click()
+      }
+      if (names[4].innerText == this.pageSize + '条/页') {
+        names[4].click()
+      }
+      if (names[5].innerText == this.pageSize + '条/页') {
+        names[5].click()
+      }
+    },
+    // 当前页码改变
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.onPageClick()
+    },
+    // 页码选择器改变
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.currentPage = 1
+      this.onSizeClick()
     }
   }
 }