0


解决element ui中el-tabs标签点击切换闪屏问题

现象:点击切换****element ui中el-tabs时候,table会出现闪一下的状况;

初始element ui中el-tabs组件代码如下:

<el-tabs type="card" v-model="activeName">
  <el-tab-pane label="线路配置" name="first"><lineDetail /></el-tab-pane>
  <el-tab-pane label="车站配置" name="second"> <stationDetail /></el-tab-pane>
  <el-tab-pane label="特殊路段配置" name="three"><specialRoadDetail /></el-tab-pane>
  <el-tab-pane label="管界配置" name="four"><workManagementDetail /></el-tab-pane>
</el-tabs>

使用v-if="activeName==='first'"解决闪屏

** 改造后代码如下:**

<el-tabs type="card" v-model="activeName">
  <el-tab-pane label="线路配置" name="first"><lineDetail v-if="activeName==='first'"/></el-tab-pane>
  <el-tab-pane label="车站配置" name="second"> <stationDetail v-if="activeName==='second'"/></el-tab-pane>
  <el-tab-pane label="特殊路段配置" name="three"><specialRoadDetail v-if="activeName==='three'"/></el-tab-pane>
  <el-tab-pane label="管界配置" name="four"><workManagementDetail v-if="activeName==='four'"/></el-tab-pane>
</el-tabs>
标签: vue.js 前端 elementui

本文转载自: https://blog.csdn.net/weixin_44065196/article/details/131491876
版权归原作者 齐天qaq 所有, 如有侵权,请联系我们删除。

“解决element ui中el-tabs标签点击切换闪屏问题”的评论:

还没有评论