el-table 每列使用了min-width 百分比之后,解决闪屏问题

vue

css 复制代码
 <el-table ref="tab1" :data="tableData"
tooltip-effect="dark" :cell-style="{'text-align':'center'}"
style="width: 100%" :header-cell-style="{'text-align':'center' ,'background':'#F3F9FF'}"
@selection-change="handleSelectionChange" @select-all="selectAll" @select="selectRow">
  <el-table-column type="selection"min-width="5%"></el-table-column>
<el-table-column prop="InitiationTime" label="测评时间"min-width="15%">

注意,设置列的百分比不能直接width:10%这样是无效的,只能min-width:10%这样的设置

还有就是必须设置ref的属性

由于el-table 默认是width 给定尺寸,现在给的百分比,加载数据的时候,会出现闪跳一下,然后表格再显示,需要设置beforeUpdate钩子,这个beforeUpdate:视图层的数据改变时触发

javascript 复制代码
/*解决el-table 列百分比设置,闪屏的问题*/
  beforeUpdate() {
    // table数据更新后,重新渲染table避免闪动
    this.$nextTick(() => {
      this.$refs['tab1'].doLayout()
    });
    
 },

注意:该beforeUpdate 需要写在跟methods:()同级,可以写之前,可以写之后,不要写在methods里面了

相关推荐
魔云连洲21 分钟前
React中的合成事件
前端·javascript·react.js
人工智能训练师39 分钟前
在Ubuntu中如何使用PM2来运行一个编译好的Vue项目
linux·运维·服务器·vue.js·ubuntu·容器
浩星1 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
xrkhy1 小时前
ElmentUI之DateTimePicker 日期时间选择器
elementui
唐•苏凯2 小时前
ArcGIS Pro 遇到严重的应用程序错误而无法启动
开发语言·javascript·ecmascript
萌萌哒草头将军2 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。2 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
薄雾晚晴2 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
薄雾晚晴2 小时前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
niuhuahua2 小时前
大模型流式聊天,实时对话,快捷问题选项
vue.js