当前位置:   article > 正文

element UI table 表格表头错位,不需要任何代码就简单的适应一下不就得了_elementui表头与内容不对齐

elementui表头与内容不对齐

项目场景:

最近学学前端,必备elementUI对吧,然后肯定要用到表格
然后就在官网c了一个固定表头的表格的代码
在这里插入图片描述
然后问题发生了,我的电脑分辨率比较大,所以在浏览器中有缩放,就导致表头和数据错位了,看着是真难受
在这里插入图片描述
处理完之后的效果
在这里插入图片描述
看着终于舒服了

网上各种找解决办法,下面是看到最多的方法,反正我用着是没好使,可能我不是太专业的前端吧,后来我发现一个最简单的方法
方法一:

在第一个el-table-column中加上:key=“Math.random()”

<el-table :data="tableData" border>
    <el-table-column :key="Math.random()" prop="date" label="日期"> </el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
</el-table>
  • 1
  • 2
  • 3
  • 4
  • 5

方法二:

在上绑定ref=‘tableRef’ ,然后在调取到数据后执行以下代码

this.$nextTick(() => {
   this.$refs.tableRef.doLayout()
})
  • 1
  • 2
  • 3

方法三:

尤其是解决在360浏览器不兼容的情况下,可以使用该方式,全局修改el-table的样式。

.el-table th .gutter{
    display: table-cell!important;
}
  • 1
  • 2
  • 3

最终解决方案:

留一个不固定宽度的表头,不就可以达到自适应了

在这里插入图片描述
然后效果就好了,毕竟我这要求没这么高,看得过去就行,如果表格的整体大小太大,那就外面的div改点就完事了呗
在这里插入图片描述

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号