使用vue的时候数据修改后又自动置空了
代码如下：
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抄表管理</title>
<script src="/js/vue.js"></script>
<script src="/js/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="/js/element-ui/lib/theme-chalk/index.css">
<script src="/js/axios.js"></script>
</head>
<body>
<div id="app">
<el-table
ref="multipleTable"
:data="comprehensives"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="numbers"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="username"
label="用户名"
width="180">
</el-table-column>
<el-table-column
prop="propertyTypeName"
label="电话号码"
width="180">
</el-table-column>
<el-table-column
prop="lastNum"
label="性别"
width="180">
</el-table-column>
<el-table-column
prop="thisNum"
label="身份号码"
width="180">
</el-table-column>
<el-table-column
prop="checkTime"
label="房屋编号"
width="180">
</el-table-column>
<el-table-column
prop="meter"
label="备注"
width="180">
</el-table-column>
<!--自定义模板包裹按钮-->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">修改</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--分页组件 -->
<div class="block">
<span class="demonstration"></span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
multipleTable:[
],
dialogFormVisible1:false,
dialogFormVisible2:false,
// 分页相关
pageSizes:[3,6,9],
currentPage:0,
pageSize:3,
total:0,
//进行查询的数据
houses:[
],
owners:[
],
records:[
],
propertyTypes:[
],
propertyInfos:[
],
propertyInfo:{
},
comprehensives:[
],
comprehensive:{
numbers:null,
username:null,
propertyTypeName:null,
lastNum:null,
thisNum:null,
checkTime:null,
meter:null
},
},
methods:{
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleAddComplaintType(){
app.dialogFormVisible2 = true;
},
handleSizeChange(val){
this.pageSize=val;
this.handleComprehensives();
},
handleCurrentChange(val){
this.currentPage=val;
this.handleComprehensives();
},
//处理选框的函数
handleSelectionChange(val) {
console.log(val);
this.multipleSelection = val;
},
//与更新相关的函数
handleEdit(index,row){
this.dialogFormVisible1 = true;
console.log(row);
this.comprehensive=row;
},
findPropertyInfoPage(currentPage,pageSize){
axios.get("http://localhost:8080/propertyInfoServe/"+currentPage+"/"+pageSize)
.then(resp =>{
if(resp.data.code===20041){
this.propertyInfos = resp.data.data.pageList;
this.total=resp.data.data.totalPageNum;
console.log(this.propertyInfos.length);
}else {
console.log(resp.data);
}
})
},
findAllPropertyTypes(){
let arr = [];
for(let i = 0;this.propertyInfos.length;i++){
arr.push(this.propertyInfos[i].typeId);
}
axios.get("http://localhost:8080/propertyTypeServe")
.then(resp=>{
if(resp.data.code===20041){
console.log(resp.data);
this.propertyTypes = resp.data.data;
}else {
console.log(resp.data);
}
})
},
findAllRecords(){
let arr = [];
for(let i = 0;this.propertyInfos.length;i++){
arr.push(this.propertyInfos[i].houseId);
}
axios.get("http://localhost:8080/recordsServe")
.then(resp=>{
if(resp.data.code===20041){
console.log(resp.data);
this.records = resp.data.data;
}else {
console.log(resp.data);
}
})
},
findAllHouses(){
let arr = [];
for(let i = 0;this.propertyInfos.length;i++){
arr.push(this.propertyInfos[i].houseId);
}
axios.get("http://localhost:8080/houseServe")
.then(resp=>{
if(resp.data.code===20041){
console.log(resp.data);
this.houses = resp.data.data;
}else {
console.log(resp.data);
}
})
},
findAllOwners(){
let arr = [];
for(let i = 0;this.propertyInfos.length;i++){
arr.push(this.propertyInfos[i].houseId);
}
axios.get("http://localhost:8080/ownerServe")
.then(resp=>{
if(resp.data.code===20041){
console.log(resp.data);
this.owners = resp.data.data;
console.log(this.owners);
}else {
console.log(resp.data);
}
})
},
handleComprehensives(){
console.log(this.propertyInfos.length);
for(let i = 0;i < this.propertyInfos.length;i++){
console.log("进行循环了");
for(let j = 0;j<this.houses.length;j++){
if(this.propertyInfos[i].houseId===this.houses[j].id){
this.comprehensive.numbers=this.houses[j].numbers;
}
}
console.log("循环1");
for(let j = 0;j<this.owners.length;j++){
if(this.propertyInfos[i].houseId===this.owners[j].id){
this.comprehensive.username=this.owners[j].username;
}
}
console.log("循环2");
for(let j = 0;j<this.propertyTypes.length;j++){
if(this.propertyInfos[i].typeId===this.propertyTypes[j].typeId){
this.comprehensive.propertyTypeName=this.propertyTypes[j].name;
}
}
console.log("循环3");
for(let j = 0;j<this.records.length;j++){
if(this.propertyInfos[i].houseId===this.records[j].houseId){
// this.comprehensive.lastNum=this.records[j].num;
this.comprehensive.thisNum=this.records[j].num2;
this.comprehensive.checkTime=this.records[j].checkTime;
this.comprehensive.meter=this.records[j].meter;
}
}
console.log("循环4");
this.comprehensives.push(this.comprehensive);
console.log(this.comprehensives);
this.comprehensive=null;
}
console.log(this.comprehensives);
}
},
created(){
let that=this;
that.findPropertyInfoPage(that.currentPage,that.pageSize);
that.findAllPropertyTypes();
that.findAllRecords();
that.findAllHouses();
that.findAllOwners();
that.handleComprehensives();
}
})
</script>
</body>
</html>
```
