一、需求
使用element-ui 的 table组件实现自定义列 + 固定列功能
这里只有解决方案,没有追根溯源,为啥嘞? 因为我菜 T.T
二、解决方案
直接上才艺
①动态切换表格时,(随机性的)导致固定列塌陷(固定列的内容会坠下来),使用doLayout() 方法解决,具体如下:
在 vue的 updated 中调用即可,也有在mounted,beforeUpdate中调用的,自行尝试。
updated() {
this.$refs.table.doLayout()
}
1
2
3
②解决了上述问题后 可能还会遇到这个问题:动态切换表头时,table发生闪烁问题,
这边时直接设置 table 的 .cell样式的高度给一个固定值,具体如下
//重写表格样式,不在自动计算,解决表格渲染时闪烁问题
//不写这个使用v-if重新渲染表格的时候会再次计算下宽高,导致了抖动div高度=table容器高度/行数
// -----取自某位老哥的分析
.el-table .cell {
height: 25px!important;
}
1
2
3
4
5
6
③表格自适应高度,我这边简单的提供一个思路的,因为我觉得我的实现不是最优解
我们通过实践发现,当table组件有height 或者 max-height的时候才会出现纵向滚动条,但是我们实际的业务需求和开发中,表格的高度往往需要自适应高度,如果手动为table body加滚动,就会出现固定列不随表格内容滚动情况,
解决方案如下: 动态设置table组件的height的属性值
:height="maxHeight"
this.maxHeight = this.$refs.table.$el.getBoundingClientRect().height
1
2
3
具体的api呀 方法啥的 都可以自己找的 不一定非要我这个写法,主要是思路:动态的赋予height的值就ok了
element table 自定义列 + 固定列 导致显示问题
最新推荐文章于 2024-08-13 09:57:39 发布