el-table不设置height 固定表头

### Element UI 中 `el-table` 不设置高度实现固定表头的方法 在某些场景下，开发者可能希望在不指定表格高度的情况下仍然能够实现固定的表头功能。然而，默认情况下，Element UI 的 `el-table` 需要通过设置 `height` 或者 `max-height` 属性来启用固定表头的功能[^1]。 为了实现在 **不显式设置高度** 的前提下仍能保持表头固定的效果，可以采用以下方式： #### 方法一：利用 CSS 自定义样式 可以通过自定义样式的手段模拟固定表头的行为。以下是具体实现方案： ```html <template> <div class="custom-scroll"> <el-table :data="formData.result" border style="width: 100%"> <el-table-column v-for="key in formData.listkey" :key="key" :prop="key" :label="key"></el-table-column> </el-table> </div> </template> <style scoped> .custom-scroll { max-height: 350px; overflow-y: auto; } .custom-scroll .el-table__header-wrapper { position: sticky; top: 0; background-color: white; z-index: 999; } </style> ``` 上述代码中，`.custom-scroll` 容器设置了最大高度并启用了垂直滚动条。同时，通过给 `.el-table__header-wrapper` 添加 `position: sticky` 和 `top: 0` 来使表头始终停留在顶部位置[^2]。 --- #### 方法二：动态计算表格的高度 如果需要更灵活的方式，则可以在 JavaScript 中动态调整表格容器的高度，并结合 Vue.js 数据绑定机制完成操作。例如： ```javascript <script> export default { data() { return { formData: { result: Array.from({ length: 100 }, (_, i) => ({ id: i, name: `Name ${i}` })), listkey: ['id', 'name'] } }; }, mounted() { this.adjustTableHeight(); window.addEventListener('resize', this.adjustTableHeight); }, beforeDestroy() { window.removeEventListener('resize', this.adjustTableHeight); }, methods: { adjustTableHeight() { const container = document.querySelector('.dynamic-table-container'); if (container) { container.style.height = `${window.innerHeight * 0.7}px`; // 动态设定为窗口高度的 70% } } } }; </script> <template> <div class="dynamic-table-container"> <el-table :data="formData.result" border height="auto"> <el-table-column v-for="key in formData.listkey" :key="key" :prop="key" :label="key"></el-table-column> </el-table> </div> </template> <style scoped> .dynamic-table-container { overflow-y: auto; } </style> ``` 此方法的核心在于监听浏览器窗口大小变化事件 (`resize`) 并实时更新表格容器的高度，从而间接实现了无需手动配置静态高度即可拥有固定表头的能力。 --- #### 注意事项 - 如果仅依赖于 `position: sticky` 实现固定效果，在部分老旧版本浏览器上可能存在兼容性问题。 - 表格内容过多时可能会引发性能瓶颈，建议合理优化渲染逻辑或者分页加载数据。 ---