组件提前渲染

news2024/12/27 12:11:51

问题:

组件正常引入并使用的过程中,出现组件第一次渲染不显示,只有再次刷新页面才显示的问题

<el-table-column label="图纸规定" align="center" prop="tzgd" v-if="mbform.zbzd.tzgd" width="450">

    <template slot-scope="scope">

        <inputsptext :formValue="scope.row.tzgd" :zbIndex="scope.$index" :onlyread="true"></inputsptext>

    </template>

</el-table-column>

解决问题:

通过 Vue 的动态组件来提前渲染组件。动态组件允许你动态地切换组件的显示,这样可以在页面加载时就渲染组件,但不一定立即显示。

<el-table-column label="规定值" align="center" prop="gdz" v-if="mbform.zbzd.gdz" width="450">
    <template slot-scope="scope">
        <component :is="dynamicComponent" :formValue="scope.row.gdz" :zbIndex="scope.$index" :onlyread="true"></component>
    </template>
</el-table-column>

import inputsptext from "../../components/inputsptext";

export default {


    components: {inputsptext},

    data(){

        return{
        
            dynamicComponent:inputsptext,
    
        }

    }
}

分析:

dynamicComponent 是一个动态变量,它决定了当前要显示的组件。通过在 data 中设置初始的组件,就可以在页面加载时就渲染该组件。如果需要在特定时机显示该组件,可以在相应的生命周期钩子或方法中修改 dynamicComponent 的值。

这种方法可以让你在页面加载时就提前渲染组件,但是在显示时也具有灵活性。根据具体情况,选择适合项目需求的方法来控制组件的渲染和显示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2064084.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

动手实现基于Reactor模型的高并发Web服务器(一):epoll+多线程版本

系统流程概览 main函数 对于一个服务器程序来说&#xff0c;因为要为外部的客户端程序提供网络服务&#xff0c;也就是进行数据的读写&#xff0c;这就必然需要一个 socket 文件描述符&#xff0c;只有拥有了文件描述符 C/S 两端才能通过 socket 套接字进行网络通信&#xff0…

【深海王国】小学生都能玩的单片机!番外2:Arduino控制其他元器件

Hi٩(๑ ^ o ^ ๑)۶, 各位深海王国的同志们&#xff0c;早上下午晚上凌晨好呀~辛勤工作的你今天也辛苦啦 (o゜▽゜)o☆ 今天大都督为大家带来单片机的新番外系列——小学生都能玩的单片机&#xff01;番外2&#xff1a;Arduino控制其他元器件&#xff0c;带你学习如何使用Ard…

性能测试面试问答题

1、性能测试怎么测试&#xff1f; 性能测试其实就是通过自动化工具模拟多种正常、峰值以及异常负载来对系统的各项性能指标进行测试。负载测试和压力测试都属于性能测试&#xff0c;二者可结合使用。 性能指标主要有平均响应时间、90%响应时间、吞吐量、吞吐率&#xff0c;每…

基于SpringBoot的私房菜定制上门服务系统的设计与实现pf

TOC springboot512基于SpringBoot的私房菜定制上门服务系统的设计与实现pf 第1章 绪论 1.1 课题背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域…

图书项目要点

一、搭建项目 使用tarojs/cli进行搭建 taro init [项目名] 二、具体页面 页面声明&#xff1a; 在【app.config.ts】中对主页面进行声明&#xff1a;组件页面可以不用声明 pages: ["pages/index/index",pages/user/index,pages/book/index,], tabbar制作&…

Linux系统编程(14)UDP全双工通信和TCP半双工通信

一、UDP全双工通信 UDP通信基础&#xff1a; recvfrom函数 recvfrom 是一个用于接收数据的函数&#xff0c;&#xff0c;但 recvfrom 不仅接收数据&#xff0c;还可以获取发送数据的地址信息。 ssize_t recvfrom(int sockfd, void *buf, size_t len, int flags, struct sock…

【vue3|第25期】Vue3中的useRoute:轻松访问路由信息

日期&#xff1a;2024年8月21日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉在这里插入代码片得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不…

撰写文献综述策略

撰写文献综述 文献综述在形式上与任何其他类型的学术文本没有任何不同&#xff0c;因为它也具有基本部分。每个部分中包含的内容取决于您撰写文献综述的目的&#xff1a; 简介 此部分应明确定义评论的目的和重点。论文&#xff1a;如果您将评论作为毕业论文或学位论文的一部分…

文件IO函数练习

作业&#xff1a;使用write和read完成文件的拷贝。 代码 #include <myhead.h>int main(int argc, const char *argv[]) {int fd open("./1.txt",O_RDONLY);//已只读打开被拷贝文件if(-1 fd){perror("open");return -1;}int fd1 open("./2.…

Python使用QtSide6(PyQt)编写界面

1、安装QtSide6 开始菜单cmd 创建虚拟环境 python -m venv env2 进入虚拟环境 call env2/scripts/activate 安装Pyside6 pip install Pyside6 2、设计Qt界面 打开designer.exe&#xff0c;设计界面 点击菜单【窗体】【View Python Code...】&#xff0c;点击【全部复制】…

论文阅读:MonoScene: Monocular 3D Semantic Scene Completion

论文阅读&#xff1a;MonoScene: Monocular 3D Semantic Scene Completion Abstract MonoScene提出了一个3D语义场景完成&#xff08;SSC&#xff09;框架&#xff0c;其中场景的密集几何形状和语义是从单个单目 RGB 图像中推断出来的。与SC文献不同&#xff0c;我们依靠2.5或…

回归预测|基于北方苍鹰优化NGO-Transformer-GRU组合模型的数据预测Matlab程序多特征输入单输出

回归预测|基于北方苍鹰优化NGO-Transformer-GRU组合模型的数据预测Matlab程序多特征输入单输出 文章目录 前言回归预测|基于北方苍鹰优化NGO-Transformer-GRU组合模型的数据预测Matlab程序多特征输入单输出 一、NGO-Transformer-GRU模型NGO-Transformer-GRU组合模型的数据预测1…

Linux之数字证书

新书速览|Ubuntu Linux运维从零开始学_ubuntu linux运维从零开始学 pdf 下载-CSDN博客 《Ubuntu Linux运维从零开始学&#xff08;Linux技术丛书&#xff09;》(肖志健)【摘要 书评 试读】- 京东图书 (jd.com) 随着网络环境的恶化&#xff0c;人们已经逐渐抛弃网络上面的明文…

嵌入式day32

recvfrom 参数&#xff1a; sockfd //socket的fd buf //保存数据的一块空间的地址 len //这块空间的大小 flags //0 默认的接收方式 --- 阻塞方式 src_addr //用来保存发送方的地址信息 addrlen //表示发送方实际的地址信息大小 返回值&#xff1a; 成功 返回接收到的字…

小米、友邦带领恒指大反攻!

港股三大指数反弹止步2连跌&#xff0c;恒生科技指数一度冲高至2%&#xff0c;恒指收涨1.44%。盘面上&#xff0c;大型科技股多数表现活跃&#xff0c;业绩超预期&#xff0c;小米大涨超8%表现尤其抢眼&#xff0c;京东涨约4%&#xff0c;百度涨1.71%&#xff0c;网易涨2.14%&a…

linux内核编译及驱动程序的添加

内核编译:Makefile 条件编译 先拷贝一个默认的配置到.config (官方所有的默认配置文件在arch/arm/configs下) 我使用的是内核源码顶层目录下的config_mini2440_td35 在Kconfig中定义menuconfig中的可配置选项 make menuconfig //可视化配置菜单 --内核活地图 .config #…

生产者消息可靠性

若支付服务和mq之前网络链接失败/mq挂掉/交易服务挂掉,都有可以让支付订单无法更新,所以导致发送者不可靠,mq本身不可靠,消费者不可靠,消息延迟,针对以下问题 生产者可靠性 支付服务和mq之间有可能连不上,连不上怎么办,可以增加失败重连 配置文件中配置-重连 测试结果…

《黑神话·悟空》主创冯骥:我真的不适合做生物

出品| 木青生信大模型 作者| 穆易青、kimi 头图| 大地老周 引言 《黑神话:悟空》自8月20日全球上线以来,以其震撼的视觉效果和深刻的游戏体验,迅速成为现象级作品。这款游戏不仅创下了450万份的单日销量纪录,更在Steam等平台上取得了前所未有的成功。作为一名热爱游戏的…

SDXS:知识蒸馏在高效图像生成中的应用

人工智能咨询培训老师叶梓 转载标明出处 扩散模型虽然在图像生成方面表现出色&#xff0c;但其迭代采样过程导致在低功耗设备上部署面临挑战&#xff0c;同时在云端高性能GPU平台上的能耗也不容忽视。为了解决这一问题&#xff0c;小米公司的Yuda Song、Zehao Sun、Xuanwu Yin…

财务报表解读指南:关键指标与分析方法详解

一、概述 财务报表中包含了丰富的信息&#xff0c;但如果在分析时缺乏明确的思路或忽略重点&#xff0c;很容易被复杂的数据搞得无所适从。本文将介绍财务报表中的关键指标&#xff0c;包括资产负债率的分析、净资产收益率的解读&#xff0c;以及销售复合增长率的计算&#xf…