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
上一篇下一篇

猜你喜欢

热点阅读