本文介绍了在Element-UI中遇到的下拉框选择后表格滚动效果失效的问题。问题表现为页面初始化时数据能正常渲染，但列表无法滚动。通过分析，发现并非请求或钩子函数问题。解决方案是通过给表格绑定动态key，利用key的改变强制重新渲染表格结构，从而恢复滚动效果。虽然这种方法可能导致性能消耗，但在找不到根本原因时提供了一种临时解决思路。
目录
项目场景：
在最近的项目中接触了下拉框与表格数据联动的需求：
通过点击select下拉框节点触发列表渲染，页面初始化时默认选中下拉框中第一个节点并渲染数据。
问题描述：
知识提要：在element-UI中只要在el-table元素中定义了height属性，即可实现固定表头的表格，若数据过多则会产生列表滚动效果。
问题描述：下拉框设置默认选择节点后，绑定表格数据渲染。
在页面初始化时，表格数据渲染出来了，但是列表无法实现滚动效果：
正常的下拉框节点选择，列表渲染和展示效果正常：
原因分析：
经过前期对请求和钩子函数进行处理，并没有明确的发现问题的所在，问题不详，还希望有清楚这方面的来一起交流……
解决方案：
由于不知道问题的根源所在，在这里使用了 一个较笨的方法——强制渲染表结构：
给表格结构增添一个key值，产生一个唯一性，每次渲染数据的时候同时也渲染一下表格结构，可以很好的解决这个问题。
部分代码如下：
在el-table上绑定key：
让key等于每次点击select节点是返回的id：
在js中对key与节点id进行绑定：
弊端：这样做每次重新渲染表结构，并没有复用，有点消耗性能
这种方式虽说解决了这个问题，不过存在不妥之处，如果您有其他较好的解决思路，希望指教，
可以一起进行交流、学习
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
