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

butterfly_onfly2024-12-14 23:10

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里面了