style(plzl):增加分页显示

 <template>
-    <div>
+    <div class="main">
         <el-dialog
                 title="选择宗地"
                 :visible.sync="isVisible"
@@ -74,9 +74,18 @@
                         <td>{{item.qlr}}</td>
                         <td>{{item.zl}}</td>
                     </tr>
-
                 </table>
             </div>
+            <div class="page">
+                <el-pagination
+                        background
+                        layout="prev, pager, next,total"
+                        :page-size="queryData.pageSize"
+                        :total="total"
+                        @current-change="currentChange"
+                >
+                </el-pagination>
+            </div>
             <div class="footer-button">
                 <el-button type="primary" @click="save">确认</el-button>
                 <el-button type="primary" @click="close">取消</el-button>
@@ -94,6 +103,7 @@
         name: "cxlzQueryData",
         data() {
             return {
+                total: 1,
                 queryData: {
                     bdcdyh: "",
                     bdcqzh: "",
@@ -102,11 +112,13 @@
                     qszt: "2",
                     xmmc: "",
                     zddm: "",
-                    zl: ""
+                    zl: "",
+                    pageNo: 1,
+                    pageSize: 10,
                 },
                 Data: [],
                 isVisible: false,
-                zdbsm:''
+                zdbsm: ''
             }
         },
         props: {
@@ -132,12 +144,14 @@
         created() {
         },
         methods: {
+            currentChange: function (val) {
+                this.queryData.pageNo = val;
+                this.getData(this.queryData);
+            },
             select: function (val) {
                 this.zdbsm = val.glbsm
             },
             save: function () {
-
-
                 zrzcxlz({
                     zdBsm: this.zdbsm,
                     zrzBsm: this.zrzbsm
@@ -157,7 +171,9 @@
                     qszt: "2",
                     xmmc: "",
                     zddm: "",
-                    zl: ""
+                    zl: "",
+                    pageNo: 1,
+                    pageSize: 10,
                 };
                 this.getData(this.queryData)
             },
@@ -165,6 +181,7 @@
                 data['dylxs'] = this.dylxs;
                 getSearchList(data).then(res => {
                     this.Data = res.result.records
+                    this.total = res.result.total;
                 })
             },
             search: function () {
@@ -187,10 +204,11 @@
 <style scoped lang="less">
 
     .main {
-        box-sizing: border-box;
+        /*box-sizing: border-box;*/
         padding: 18px;
-        height: auto;
+        height: 800px;
         width: 80%;
+        position: absolute;
     }
 
     table {
@@ -226,9 +244,12 @@
         color: #b2b2b2;
     }
 
+    .search {
+        height: 650px;
+    }
+
     .footer-button {
         text-align: center;
         margin-top: 20px;
     }
-
 </style>

@@ -76,10 +76,11 @@
                 @close="close"
                 :zrzbsm="zrzbsm"
         ></cxlz-query-data>
-		<div>
+        <div class="page">
             <el-pagination
                     background
                     layout="prev, pager, next,total"
+                    :page-size="queryData.pageSize"
                     :total="total"
                     @current-change="currentChange"
             >
@@ -89,12 +90,12 @@
 </template>
 
 <script>
-import { getSearchList } from "./../../../../api/search";
-import cxlzQueryData from "../../../../components/cxlxQueryData/cxlzQueryData";
+    import {getSearchList} from "./../../../../api/search";
+    import cxlzQueryData from "../../../../components/cxlxQueryData/cxlzQueryData";
 
-export default {
+    export default {
         name: "",
-	components: { cxlzQueryData },
+        components: {cxlzQueryData},
         props: {},
         data() {
             return {
@@ -111,34 +112,31 @@ export default {
                     zddm: "",
                     zl: "",
                     pageNo: 1,
-				pageSize: 5,
+                    pageSize: 12,
                 },
                 Data: [],
                 dylxs: ["zd"],
             };
         },
-	created() {},
+        created() {
+        },
         mounted() {
             this.getData(this.queryData);
         },
         methods: {
-		sizeChange: function(val) {
-			console.log(`每页 ${val} 条`);
-			this.queryData.pageSize = val;
-		},
-		currentChange: function(val) {
+            currentChange: function (val) {
                 console.log(`当前页: ${val}`);
                 this.queryData.pageNo = val;
                 this.getData(this.queryData);
             },
-		xzzrz: function(item) {
+            xzzrz: function (item) {
                 this.centerDialogVisible = true;
                 this.zrzbsm = item.glbsm;
             },
-		close: function() {
+            close: function () {
                 this.centerDialogVisible = false;
             },
-		result: function() {
+            result: function () {
                 this.queryData = {
                     bdcdyh: "",
                     bdcqzh: "",
@@ -149,62 +147,69 @@ export default {
                     zddm: "",
                     zl: "",
                     pageNo: 1,
-				pageSize: 10,
+                    pageSize: 12,
                 };
                 this.getData(this.queryData);
             },
-		getData: function(data) {
+            getData: function (data) {
                 getSearchList(data).then((res) => {
                     this.Data = res.result.records;
                     this.total = res.result.total;
                 });
             },
-		search: function() {
+            search: function () {
                 this.getData(this.queryData);
             },
         },
         computed: {},
         watch: {},
-};
+    };
 </script>
 <style scoped lang="less">
-.main {
+    .main {
         box-sizing: border-box;
         padding: 18px;
         height: auto;
         width: 80%;
-}
+    }
 
-table {
+    table {
         margin-top: 10px;
         background-color: #fff;
         font-size: 14px;
         width: 100%;
-}
+    }
 
-td {
+    td {
         text-align: center;
         height: 36px;
         min-width: 50px;
-}
+    }
 
-table:hover {
+    table:hover {
         cursor: pointer;
-}
+    }
 
-.inputtitle {
+    .inputtitle {
         line-height: 40px;
-}
+    }
 
-.shop {
+    .shop {
         margin-top: 20px;
-}
+    }
 
-.xz {
+    .xz {
         color: blue;
-}
+    }
 
-.noData {
+    .noData {
         color: #b2b2b2;
-}
+    }
+
+    .page {
+        position: fixed;
+        bottom: 20px;
+        width: auto;
+        height: auto;
+    }
 </style>