elementUI的table表格表头错位问题解决办法

问题现象:

elementUI table组件在Windows系统Google浏览器出现表头的边框和内容的边框错位问题
WechatIMG5.jpegcss

解决办法:


方法一:添加css样式覆盖

把这样式添加到index.html中、或者app.vue中(必须是入口文件,才能全局起做用!)html

body .el-table th.gutter{
    display: table-cell!important;
}

注:在个人项目中有一个项目用这个方法能解决,另一个项目不能解决。。。采用的方法二vue


方法二:一样添加css样式覆盖

.el-table--border th.gutter:last-of-type {
  display: block!important;
}

方法三:网上搜的没有尝试过

el-table组件挂载一个ref="configurationTable",而后在每次请求数据成功后动一动表格的默认宽度浏览器

this.$refs.configurationTable.$el.style.width = '99.99%'
相关文章
相关标签/搜索