vue中使用el-table时,动态获取header,切换后重新加载数据及header出现抖动

问题描述

使用el-table时,动态获取header,切换后重新加载数据及header出现抖动

原因分析：

动态切换表头的时候出现抖动是因为表头重新计算高度导致的，重写表格样式即可在数据加载完后重新渲染可以使用doLayout方法

解决方案：

<el-table ref="multipleTable" :data="tableData">
        <el-table-column
        	v-for="(item, index) in header"
        	:key="index"
        	:prop="item.prop"
        	label="item.name"
        	align="center"
        >
        	<template slot-scope="scope">
                <div style="display: inline">
                  {{ scope.row[item.prop] }}
                </div>
            </template>
        </el-table-column>
</el-table>

  beforeUpdate() {
    this.$nextTick(() => {
      // 在数据加载完，重新渲染表格
      this.$refs['multipleTable'].doLayout();
    });
  },