element-ui table表格排版混乱

Question

使用element-ui 的table 样式之前好好地，突然出现问题，如图2 ，是正常状态，点击刷新之后页面样式发生混乱如图3，当我修改表格宽度时页面回到正常状态，但是刷新还是会排版混乱，而且之后也一直如此，怎样才能使排版正常？

图1

图2

图3

问题相关代码

<template>
    <div class="app-container">
<el-table :data="list" border style="width: 100%" :height="height" highlight-current-row='true' :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">

            <el-table-column prop="index" label="序号" width="80" fixed="left" header-align="center">
                <template slot-scope="scope">
                    {{scope.$index + 1}}
                </template>
            </el-table-column>


            <el-table-column prop="name" label="姓名" width="110" header-align="center">
            
            </el-table-column>
            
            
            <el-table-column prop="intro" label="简介" width="280" header-align="center" class="details" show-overflow-tooltip>
            
            </el-table-column>
            
            <el-table-column prop="career" label="职业" width="120" header-align="center">
            
            </el-table-column>
            
            <el-table-column prop="level" label="职级" width="90" header-align="center">
                <template slot-scope="scope">
                    {{scope.level===1?'高级讲师':'首席讲师'}}
                </template>
            </el-table-column>

            <el-table-column  prop="sort" label="排名" width="60" header-align="center">

            </el-table-column>

            <el-table-column  prop="gmtCreate" label="入职时间" width="110" header-align="center" :formatter="dateFormat">

            </el-table-column>

            <el-table-column prop="gmtModified" label="变动时间" width="110" header-align="center" :formatter="dateFormat">
            
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="200" header-align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
    </el-table-column>
  </el-table>

    
    <el-pagination
      @size-change="getList(page, $event)"
      @current-change="getList($event,size)"
      :current-page="page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="getList"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      >
    </el-pagination>
    </div>
</template>
<script>
import teacher from '@/api/edu/teacher'
import Tooltip from '@/utils/tooltip.vue'

export default {
    components: {
      Tooltip
    },
    data(){
        return {
            //接口返回数据
            list:[null],
            page:1,
            size:10,
            total:0,
            //查询条件封装的对象
            searchList:{},
            height:0
        }
    },
    created(){
        this.getList()
        this.getHeight()
    },
    methods:{
        getList(page=1,size = 10){
            this.page = page
            this.size = size
            console.log("当前页"+this.page)
            console.log("当前条数："+size)
            teacher.getTeacherPage(this.page,this.size,this.searchList)
            .then(response =>{
                // console.log(response)
                //返回数据
                this.list = response.data.items;
                //条数
                this.total = response.data.total

            })
            .catch (error =>{
                console.log(error)
            })
        },
        getHeight(){
            this.height = document.documentElement.clientHeight-100
        },
        dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      var moment = require("moment");
      return moment(date).format("YYYY-MM-DD");
    }
    }
}
</script>
<style lang="scss">
.el-pagination{
    padding: 0 890px;
    height: 10px;
}
.el-tooltip__popper{
    max-width:20%;
  }
  .el-tooltip__popper,.el-tooltip__popper.is-dark{
    background:rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
  }
</style>

Answer 1

加个doLayout

<el-table ref="table"
beforeUpdate () {
      this.$nextTick(() => {
        this.$refs['table'].doLayout() // 在数据加载完，重新渲染表格
      })
    },