element 固定列 elementui table固定列

转载

mob6454cc73e9a6 2024-02-20 16:57:26

文章标签 element 固定列 vue.js elementui 前端解决方案 文章分类 机器学习人工智能

一、需求

使用element-ui 的 table组件实现自定义列 + 固定列功能
这里只有解决方案，没有追根溯源，为啥嘞？因为我菜 T.T

二、解决方案

直接上才艺
①动态切换表格时，（随机性的）导致固定列塌陷（固定列的内容会坠下来），使用doLayout() 方法解决，具体如下：
在 vue的 updated 中调用即可，也有在mounted，beforeUpdate中调用的，自行尝试。

updated() {
    this.$refs.table.doLayout()
  }

②解决了上述问题后可能还会遇到这个问题：动态切换表头时，table发生闪烁问题，
这边时直接设置 table 的 .cell样式的高度给一个固定值，具体如下

//重写表格样式，不在自动计算，解决表格渲染时闪烁问题
//不写这个使用v-if重新渲染表格的时候会再次计算下宽高，导致了抖动div高度=table容器高度/行数
// -----取自某位老哥的分析
.el-table .cell {
    height: 25px!important;
  }

③表格自适应高度，我这边简单的提供一个思路的，因为我觉得我的实现不是最优解
我们通过实践发现，当table组件有height 或者 max-height的时候才会出现纵向滚动条，但是我们实际的业务需求和开发中，表格的高度往往需要自适应高度，如果手动为table body加滚动，就会出现固定列不随表格内容滚动情况，
解决方案如下：动态设置table组件的height的属性值

:height="maxHeight"

this.maxHeight = this.$refs.table.$el.getBoundingClientRect().height

具体的api呀方法啥的都可以自己找的不一定非要我这个写法，主要是思路：动态的赋予height的值就ok了

三、反思总结

大致看了一下element table的源码，导致上述问题的原因概率为table的组件的宽高大部分都是通过计算得来的，当我们动态的去切换时，就有可能到时某个计算过程出错或者不能有效的触发，进而导致渲染问题，好在element对外暴露了doLayout()方法，应该是设计阶段考虑到了这个问题呢