美文网首页
vue使用element引用表格的model属性未定义

vue使用element引用表格的model属性未定义

作者: 尘埃里的玄 | 来源:发表于2021-02-25 08:19 被阅读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

    相关文章

      网友评论

          本文标题:vue使用element引用表格的model属性未定义

          本文链接:https://www.haomeiwen.com/subject/cslyfltx.html