分页显示

@@ -50,52 +50,51 @@
 					<td>权利人</td>
 					<td>坐落</td>
 				</tr>
-                <tr v-if="Data.length==0">
+				<tr v-if="Data.length == 0">
 					<td colspan="8">
 						<span class="noData">暂无数据</span>
 					</td>
 				</tr>
-                <tr v-else v-for="(item,index) in Data" :key="index">
-                    <td>{{index+1}}</td>
+				<tr v-else v-for="(item, index) in Data" :key="index">
+					<td>{{ index + 1 }}</td>
 					<td @click="xzzrz(item)" class="xz">
 						<span>选择</span>
 					</td>
-                    <td>{{item.zddm}}</td>
-                    <td>{{item.bdcdyh}}</td>
-                    <td>{{item.xmmc}}</td>
-                    <td>{{item.bdcqzh}}</td>
-                    <td>{{item.qlr}}</td>
-                    <td>{{item.zl}}</td>
+					<td>{{ item.zddm }}</td>
+					<td>{{ item.bdcdyh }}</td>
+					<td>{{ item.xmmc }}</td>
+					<td>{{ item.bdcqzh }}</td>
+					<td>{{ item.qlr }}</td>
+					<td>{{ item.zl }}</td>
 				</tr>
-
 			</table>
 		</div>
-        <span slot="footer" class="dialog-footer">
-              </span>
-        <cxlz-query-data :centerDialogVisible="centerDialogVisible" :dylxs="dylxs" @close="close"
-                         :zrzbsm="zrzbsm"></cxlz-query-data>
+		<span slot="footer" class="dialog-footer"> </span>
+		<cxlz-query-data
+			:centerDialogVisible="centerDialogVisible"
+			:dylxs="dylxs"
+			@close="close"
+			:zrzbsm="zrzbsm"
+		></cxlz-query-data>
 		<div>
 			<el-pagination
 				background
-                    @size-change="sizeChange"
+				layout="prev, pager, next,total"
+				:total="total"
 				@current-change="currentChange"
-                    :current-page.sync="queryData.pageNo"
-                    :page-size="queryData.pageSize"
-                    layout="total, prev, pager, next"
-                    :total="total">
+			>
 			</el-pagination>
 		</div>
-
 	</div>
 </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 {
@@ -105,108 +104,107 @@
 			queryData: {
 				bdcdyh: "",
 				bdcqzh: "",
-                    dylxs: ['zrz'],
+				dylxs: ["zrz"],
 				qlrmc: "",
 				qszt: "",
 				xmmc: "",
 				zddm: "",
 				zl: "",
 				pageNo: 1,
-                    pageSize: 5
+				pageSize: 5,
 			},
 			Data: [],
-                dylxs: ['zd']
-            }
-        },
-        created() {
+			dylxs: ["zd"],
+		};
 	},
+	created() {},
 	mounted() {
-            this.getData(this.queryData)
+		this.getData(this.queryData);
 	},
 	methods: {
-            sizeChange: function (val) {
+		sizeChange: function(val) {
 			console.log(`每页 ${val} 条`);
-                this.queryData.pageSize = val
+			this.queryData.pageSize = val;
 		},
-            currentChange: function (val) {
+		currentChange: function(val) {
 			console.log(`当前页: ${val}`);
-                this.queryData.pageNo = val
-                this.getData(this.queryData)
+			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: "",
-                    dylxs: ['zrz'],
+				dylxs: ["zrz"],
 				qlrmc: "",
 				qszt: "",
 				xmmc: "",
 				zddm: "",
 				zl: "",
 				pageNo: 1,
-                    pageSize: 10
+				pageSize: 10,
 			};
-                this.getData(this.queryData)
+			this.getData(this.queryData);
 		},
-            getData: function (data) {
-                getSearchList(data).then(res => {
-                    this.Data = res.result.records
-                    this.total = res.total
-                })
+		getData: function(data) {
+			getSearchList(data).then((res) => {
+				this.Data = res.result.records;
+				this.total = res.result.total;
+			});
 		},
-            search: function () {
-                this.getData(this.queryData)
+		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;
-    }
+}
 </style>