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 的动画效果来控制组件的渐变过渡,以减少闪动的影响。

相关推荐
梵得儿SHI16 分钟前
Vue 数据绑定深入浅出:从 v-bind 到 v-model 的实战指南
前端·javascript·vue.js·双向绑定·vue 数据绑定机制·单向绑定·v-bind v-model
Moment18 分钟前
Electron 发布 39 版本 ,这更新速度也变态了吧❓︎❓︎❓︎
前端·javascript·node.js
消失的旧时光-194320 分钟前
8方向控制圆盘View
android·前端
自由日记23 分钟前
前端学习:选择器的类别
前端·javascript·学习
念念不忘 必有回响24 分钟前
Nginx前端配置与服务器部署详解
服务器·前端·nginx
江城开朗的豌豆24 分钟前
Webpack打包:从“庞然大物”到“精致小可爱”
前端·javascript
安当加密24 分钟前
基于ASP身份认证网关实现Web系统免代码改造的单点登录方案
java·开发语言·前端
JarvanMo27 分钟前
Bitrise 自动化发布 Flutter 应用终极指南(一)
前端
代码哈士奇27 分钟前
使用vite+vue3+ElementPlus+pinia搭建中后台应用-前端
前端·vue3·管理系统·vite7