问题:
组件正常引入并使用的过程中,出现组件第一次渲染不显示,只有再次刷新页面才显示的问题
<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
的值。
这种方法可以让你在页面加载时就提前渲染组件,但是在显示时也具有灵活性。根据具体情况,选择适合项目需求的方法来控制组件的渲染和显示。