监测列表处理

src/views/farmlandProtection/components/tbqd.vue

@@ -5,7 +5,7 @@
         <el-input
           v-model="input"
           placeholder="请输入监测编号搜索"
-          @keyup.enter.native="initNew"
+          @keyup.enter.native="initNew(true)"
         ></el-input>
         <span>共{{ total }}条</span>
       </div>
@@ -49,21 +49,15 @@
                 >详情</el-button
               >
             </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="pageNum"
-          :page-size="pageSize"
-          layout="total, prev, pager, next, jumper"
-          :total="total"
-        >
-        </el-pagination> -->
+</el-table-column>
+</el-table>
+<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
+  :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
+</el-pagination> -->
         <el-table
           :row-class-name="tableRowClassName"
           ref="singleTable"
-          :data="active_dableData"
+          :data="tableData"
           style="width: 100%"
           height="64vh"
           :header-cell-style="{
@@ -75,13 +69,12 @@
           }"
         >
           <el-table-column
-            prop="index"
-            label="序号"
+            type="index"
             width="50"
+            :index="tableIndex"
+            label="序号"
             align="center"
-            show-overflow-tooltip
-          >
-          </el-table-column>
+          />
           <el-table-column
             prop="jcbh"
             label="监测编号"
@@ -128,6 +121,15 @@
             </template>
           </el-table-column>
         </el-table>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pageNum"
+          :page-size="pageSize"
+          layout=" prev, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
       </div>
     </div>
   </div>
@@ -149,7 +151,7 @@ export default {
   components: {},
   data() {
     return {
-      pageSize: 999999999,
+      pageSize: 10,
       pageNum: 1,
       total: 0,
       input: "",
@@ -166,7 +168,7 @@ export default {
     // this.initNew()
   },
   methods: {
-    initNew() {
+    initNew(show) {
       let obj = {
         hlx: this.updateObj.val2,
         regioncode: this.updateObj.region,
@@ -176,8 +178,12 @@ export default {
         pageSize: this.pageSize,
         jcbh: this.input,
       };
+      if (show)
+        JctbList({ ...obj, pageNum: 1, pageSize: 999999999 }).then((res) => {
+          this.active_dableData = res.rows;
+        });
       JctbList(obj).then((res) => {
-        this.active_dableData = res.rows;
+        this.tableData = res.rows;
         this.total = res.total;
       });
     },
@@ -213,11 +219,11 @@ export default {
     },
     handleSizeChange(val) {
       this.pageSize = val;
-      //   this.getList();
+      this.initNew(false);
     },
     handleCurrentChange(val) {
       this.pageNum = val;
-      //   this.getList();
+      this.initNew(false);
     },
     getMapList(newVal) {
       newVal.forEach((item, index) => {
@@ -302,23 +308,28 @@ export default {
 <style lang="less" scoped>
 .tbqd {
   position: relative;
+
   .headerInput {
     display: flex;
     justify-content: space-between;
     margin: 5px 0px;
+
     /deep/.el-input {
       height: 30px;
       width: 60%;
     }
+
     /deep/.el-input__inner {
       height: 30px;
       background-color: rgba(45, 140, 240, 0.2);
       border: 1px solid #409eff;
       color: #fff;
     }
+
     /deep/ .el-input__inner::placeholder {
       color: #fff;
     }
+
     span {
       width: 30%;
       text-align: right;
@@ -326,13 +337,16 @@ export default {
       //   line-height: 30px;
     }
   }
+
   /deep/.el-table__fixed-right::before {
     background-color: transparent !important;
   }
+
   /deep/ .el-table__fixed-right {
     background: transparent !important;
     border-bottom: transparent !important;
   }
+
   //   /deep/.el-table td.el-table__cell {
   //     border-bottom: none !important;
   //     border-bottom: transparent !important;