使用element-ui table组件 fixed 布局错位

问题

使用element-ui table表格布局，头尾列fiexd时，在chrome，火狐，edg浏览器上布局正常，但是在国产浏览器,qq浏览器，UC浏览器，360浏览器上布局错乱。

在这里插入图片描述

原因

因为chrome正常，所以怀疑是国产浏览器的chrome内核版本问题，就查看了一下，qq浏览器是70，uc浏览器55，360是65，而edg浏览器和chrome浏览器内核版本均是92。造成的直接原因其实已经找到了，就是国产浏览器chrome内核版本低，而element-ui在低版本chrome内核上没有做兼容。

解决

直接原因知道了，但是怎么解决？习惯性百度了一下，果然有很多网友也遇到同样的问题，提供的方案也多种，其中说的最多的是调用element-ui table组件的doLayout方法，重新刷新布局。然并软，试了网友的多种方法均无效！

那只能尝试另辟蹊径。
于是查看了其他页面，发现项目里面的用户列表页面同样有换行，但是没有错乱。
既然有不一致，那就对比两个页面，发现其实没多大差异，所以智能来笨办法。将有问题的列表的el-table-column注释，看页面反应。首先将使用了 <template slot-scope="scope">的el-table-column注释，结果返现，当吧含有组件file-view-list （一个文件预览组件） 的el-table-column注释后，页面竟然正常了！！

在这里插入图片描述

那就是file-view-list组件有问题，于是找到file-view-list组件里面，注释里面的样式，后面终于找到了影响页面布局的css，竟然是一个多行省略样式，scss的混合。

//多行省略
@mixin textMultiLineEllipsis($clamp:1){
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $clamp;
  -webkit-box-orient: vertical;
}

具体为何影响的深层次原因目前尚不清楚，但是后面换了种写法就好了，换成单行省略的写法

//省略号
@mixin textEllipsis ($width) {
  max-width: $width;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

不过深层次原因还没有找到。