style(plzl):增加分页显示

 <template>
-    <div>
+    <div class="main">
         <el-dialog
                 title="选择宗地"
                 :visible.sync="isVisible"
                 width="50%"
                 @close="close"
                 :modal-append-to-body="false"
-                >
+        >
             <div class="search">
                 <el-button type="primary" @click="search">查询</el-button>
                 <el-button type="primary" @click="result">重置</el-button>
@@ -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>