Element UI table组件中的滚动条无效问题

目录

项目场景:

问题描述:

原因分析:

解决方案:


项目场景:

在最近的项目中接触了下拉框与表格数据联动的需求:

通过点击select下拉框节点触发列表渲染,页面初始化时默认选中下拉框中第一个节点并渲染数据。


问题描述:

知识提要:在element-UI中只要在el-table元素中定义了height属性,即可实现固定表头的表格,若数据过多则会产生列表滚动效果。

问题描述:下拉框设置默认选择节点后,绑定表格数据渲染。

在页面初始化时,表格数据渲染出来了,但是列表无法实现滚动效果:

正常的下拉框节点选择,列表渲染和展示效果正常:


原因分析:

经过前期对请求和钩子函数进行处理,并没有明确的发现问题的所在,问题不详,还希望有清楚这方面的来一起交流……


解决方案:

由于不知道问题的根源所在,在这里使用了 一个较笨的方法——强制渲染表结构:

给表格结构增添一个key值,产生一个唯一性,每次渲染数据的时候同时也渲染一下表格结构,可以很好的解决这个问题。

部分代码如下:

在el-table上绑定key:

让key等于每次点击select节点是返回的id:

 在js中对key与节点id进行绑定:

 


弊端:这样做每次重新渲染表结构,并没有复用,有点消耗性能


这种方式虽说解决了这个问题,不过存在不妥之处,如果您有其他较好的解决思路,希望指教,

可以一起进行交流、学习

猜你喜欢

转载自blog.csdn.net/weixin_42146585/article/details/119041075