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

目录

项目场景：

问题描述：

原因分析：

解决方案：

---

项目场景：

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

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

---

问题描述：

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

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

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

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

---

原因分析：

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

---

解决方案：

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

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

部分代码如下：

在el-table上绑定key：

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

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

 

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

---

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

可以一起进行交流、学习