组件提前渲染

server/2024/12/22 20:53:28/

问题:

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

javascript"><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 的动态组件来提前渲染组件。动态组件允许你动态地切换组件的显示,这样可以在页面加载时就渲染组件,但不一定立即显示。

javascript"><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.ppmy.cn/server/104121.html

相关文章

2408gui,分层窗口2

原文 先取出上篇文章的代码并找到CreateLayeredWindow函数. //创建分层窗口 HWND CreateLayeredWindow(HINSTANCE hInstance, HWND hWnd, int iWidth, int iHeight, int iPosX, int iPosY, COLORREF* colBGRA) {//注册分层窗口RegWindow(hInstance, L"LayeredWindow&quo…

Verilog刷题笔记50

题目&#xff1a; Given the following state machine with 1 input and 2 outputs: 解题&#xff1a; module top_module(input in,input [9:0] state,output [9:0] next_state,output out1,output out2);assign next_state[0]~in&(state[0]|state[1]|state[2]|state[3]…

C语言小练习(伍)

练习&#xff1a; 利用指针变量将一个数组中的数据反向输出。 void renew(int *p,int len) {for(int i len - 1;i > 0;i--){printf("%d",*(pi));} }int main() {int a[5] {1,2,3,4,5};int len1 sizeof(a) / sizeof(int);renew(a,len1);return 0; }运行结果: …

Maven命令传pom或者jar异常

上传命令&#xff1a;mvn deploy:deploy-file -Durlhttp://****&#xff1a;****/repository/chntdrools7741-releases -DrepositoryId**** -DfileD:/tempRepo/org/kie/kie-api-parent/7.69.0.Final/kie-api-parent-7.69.0.Final.pom -DpomFileD:/tempRepo/org/kie/kie-api-par…

2024年特种设备作业人员考试题库及答案(流动式起重机Q2)

一、单选题 371、轮式起重机吊重回转时会产生&#xff08;&#xff09;,所以&#xff0c;起重机司机操纵回转时要特别慎重&#xff0c;回转速度不能过快。 A.向心力 B.咼心力 C.水平力 答案&#xff1a;B 372、为防止起重臂“后倾”造成折臂事故而设置&#xff08;&#…

Windows系统命令

Windows系统命令 Windows 系统中的命令行工具是指令式编程语言&#xff0c;可以用来执行各种任务、管理文件和目录、监控系统状态等。下面是一个 Windows 命令应用实例&#xff1a; 1. 文件操作 cd&#xff1a;用于改变当前目录。例如&#xff0c;cd Documents 将当前目录更…

【Linux】如何快速查看 linux 服务器有几个cpu

如何快速查看 linux 服务器有几个cpu author: jayzhen date: 2024.08.22 文章目录 如何快速查看 linux 服务器有几个cpu1. 使用lscpu命令2. 使用nproc命令3. 使用/proc/cpuinfo文件4. 使用top或htop命令结论 在Linux服务器上&#xff0c;你可以通过多种方式快速查看系统中有几个…

【Mudo库】实战项目之服务器模块

文章目录 前言代码1. Socket1.1 Socket1.2 SSocket1.3 CSocket 2. Poller3. Channel4. Acceptor5. Time5.1 TimerTask5.1 TimerWheel 6. Buffer7. Any8. Connection9. Loop9.1 EventLoop9.2 Thread 10. TcpServer 尾序 前言 在上一篇文章当中对本项目的框架做了一个整体的介绍…