ElementUI中el-tabs标签点击切换el-table闪烁问题

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

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

html 复制代码
<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>

解决方案 1:

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

html 复制代码
<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>

解决方案 2:

内容闪动的原因是由于组件的状态被重置或者之前的状态没有及时清除,导致在组件重新渲染时,出现了短暂的内容闪烁。

例如,当 el-tabs 组件切换到一个新的标签页时,原来标签页中的内容可能还没有完全被销毁,新标签页的内容也还没有完全渲染出来,这就会导致一个短暂的内容闪烁。

为了避免这个问题,可以采用一些方法来优化组件的渲染,以减少组件重复使用时的闪动问题。例如,可以在组件中使用 key 属性来标识组件实例的唯一性,从而在组件状态发生变化时,强制 Vue.js 重新渲染组件。另外,也可以使用 CSS3 的动画效果来控制组件的渐变过渡,以减少闪动的影响。

相关推荐
Carlos_sam32 分钟前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85042 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏1 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞3 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀3 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架