element-ui el-table 数据变化时表格出现抖动

页面代码如下:

   <div class="fill-base pd-lg">

        <el-table :row-key="getRowKeys" @selection-change="handleSelectionChange" :data="tableData" border :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" class="wh">

            <el-table-column align="center" :reserve-selection="true" type="selection" width="55" />

            <div v-for="(item, index) in header" :key="index">

                <el-table-column show-overflow-tooltip :width="item.width" align="center" :key="Math.random()" :prop="item.prop" v-if="item.show" :label="item.label">

                    <template slot-scope="scope">

                        <el-tooltip effect="dark" :content="transTooltip(scope.row, item.prop)" placement="top">

                            <span>{{ scope.row[item.prop] || '-'}}</span>

                        </el-tooltip>

                    </template>

                </el-table-column>

            </div>

        </el-table>

    </div>

打开页面控制台,在输入框输入的时候,我们可以看到每一列的宽度都在不停的变化

这里我们注意表格循环的时候 赋给table的key值是:key="Math.random()" ,这代表一个随机数,只要把这个随机数换成index或者其他唯一值,即可解决页面抖动的问题