vue使用element引用表格的model属性未定义
2021-02-25 本文已影响0人
尘埃里的玄
代码:
<div style="display: flex;justify-content: start">
<el-form :inline="true" ref="uploadForm1"
:model="uploadForm1">
<el-form-item label="日期:" prop="reportDate">
<el-date-picker
:type="fileType"
v-model="uploadForm1.reportDate"
value-format="yyyy-M-dd"
placeholder="请选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="区域名称:" prop="area_ID">
<el-select v-model="uploadForm1.area_ID" placeholder="请选择">
<el-option v-for="item in areaList" :value="item.area_ID" :label="item.area_Name"></el-option>
</el-select>
</el-form-item>
<el-form-item label-width="0">
<!-- <el-button-->
<!-- type="primary"-->
<!-- icon="el-icon-search"-->
<!-- native-type="submit"-->
<!-- @click="handleUpload('uploadForm')"-->
<!-- >上传-->
<!-- </el-button>-->
<el-button type="primary" @click="uploadDateInfo('uploadForm1')" icon="el-icon-search" style="margin-left: 30px">查询</el-button>
</el-form-item>
</el-form>
</div>
<script>
created(): void {
// this.value4 = this.year + "-" + this.month + "-" + this.day;
this.uploadForm1.reportDate = this.year + "-" + this.month + "-" + this.day;
//session赋值代码在ureport.vue文件中
this.src = JSON.parse(sessionStorage.getItem("reportURL"))
// this.src = "http://192.168.7.219:9007/report/getReportList2"
this.src2 = JSON.parse(sessionStorage.getItem("partUrl"))
// this.srcTemplate = this.src;
this.fileType = JSON.parse(sessionStorage.getItem("fileType"))
this.API_SERVICE.getAllAreaName()
.then((res: any) =>{
this.areaList = res.data
})
.catch((res: any) =>{
console.log(res);
})
//利用默认的时间加载报表内容
this.uploadDateInfo('uploadForm1')
}
uploadDateInfo(formName:any) {
console.log(formName);
let data = (this.$refs[formName] as any).model
console.log("11111");
console.log("11111");
console.log(formName);
console.log("1111"+data);
let formDate = data.reportDate;
if (data)
console.log(formDate);
let p = {
// year: this.value4.split("-")[0],
// month: this.value4.split("-")[1],
// day: this.value4.split("-")[2],
year: formDate.split("-")[0],
month: formDate.split("-")[1],
day: formDate.split("-")[2],
id: data.area_ID,
url: this.src2
};
this.API_SERVICE.uReport(p)
.then((res: any) => {
this.htmlText = res.data
})
.catch((res: any) => {
console.log(res);
})
.finally(() => {
// window.location.reload()
let iframe = document.getElementById("myFrame")
let iWindow = (<HTMLIFrameElement>iframe).contentWindow
iWindow.location.reload()
// this.src = this.srcTemplate + '&t='+new Date().toTimeString();
});
}
</script>
原因是因为我调用的方法想获得表单对象,但是把方法的调用放到了钩子函数created中,created调用表单对象时,表单组件都还没开始创建,所以报表单未定义。
解决办法:将调用放到mounted中
具体细节可以去vue官网查看钩子函数的生命周期
mounted(): void {
// this.value4 = this.year + "-" + this.month + "-" + this.day;
this.uploadForm1.reportDate = this.year + "-" + this.month + "-" + this.day;
setTimeout(() => {
this.loading = false;
}, 230);
const that = this;
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 94.5 + "px;";
};
this.uploadDateInfo('uploadForm1')
}
image.png