wanfeng010 2022-02-22 11:09 采纳率: 79.2%
浏览 112
已结题

element-ui table表格排版混乱

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

图1

img

图2

img

图3

img

问题相关代码
<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>


  • 写回答

2条回答 默认 最新

  • 你好!机器人 2022-02-22 11:28
    关注

    加个doLayout

    <el-table ref="table"
    beforeUpdate () {
          this.$nextTick(() => {
            this.$refs['table'].doLayout() // 在数据加载完,重新渲染表格
          })
        },
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月2日
  • 已采纳回答 2月22日
  • 创建了问题 2月22日

悬赏问题

  • ¥15 调用函数时,无关变量的改变引起函数值的改变
  • ¥15 xy坐标转化为经纬度坐标
  • ¥15 一般三角模糊数的上界值和下届值取中值的多少比较合理?
  • ¥15 关于#python#的问题,请各位专家解答!
  • ¥20 Hbase启动失败,无法启动HMaster
  • ¥15 sqpingboot在父模块已经引入了mybatisplus 在子组件不写版本号还是报错
  • ¥20 Lumerical FDTD solutions 中模型的相对阻抗,有效介电常数和有效磁导率的实部和虚部的数据如何获得?
  • ¥100 sql reporting service 远程smtp服务器配置支持
  • ¥15 ppyoloe_r带角度目标检测,loss_cls没法收敛
  • ¥15 淘宝交易指数如何解读,其关联的数据指标是什么