Element-ui的table中使用fixed后出现行混乱情况的解决

Element-ui的table中使用fixed后出现行混乱

话不多说，先看看问题是什么

我们看到table左侧fixed的区域并没有延伸到表格底部，之前在用户拖拽表格时添加了方法this.$refs.headGroupTable.doLayout()来重置表格（headGroupTable是自定义组件名称，学过vue的都懂），但是在数据拿到后使用此方法并不能解决以上问题

解决方法

其实解决方法也很简单，我们打开浏览器看到fiexed的表格区域样式的高度是固定的px，这是我只需要添加一下代码即可

.el-table__fixed {
  height: 100%!important;
}

其实这里我想告诉大家，解决问题的方法不难找出，很多种方案都可实现，比如还可以使用jq、元素js等等都可以解决以上问题，当然我只是把最简单暴力的贴出来了，温馨提示下，这个样式不建议全局修改，你可以写成局部样式，部分组件生效

使用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注释，看页面反应。

首先将使用了 的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;
}

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论