在Vue中使用Element UI的<el-table>组件时,固定表格的高度是一个常见需求,尤其是当表格内容较多,需要滚动查看时。以下是如何实现<el-table>高度固定的几个步骤和建议: 1. 使用height属性直接设置 最直接的方式是在<el-table>标签上直接使用height属性来设置固定的高度。但这种方式适用于已知...
1.表格标签 <el-table :data="costList" border :height="tableHeight"> 2.具体实现 const tableHeight = ref(500); const settingsStore=useSettingsStore();//此方法 精确计算表格高度,固定表格顶部用const calculateTableHeight = () =>{ const windowHeight= window.innerHeight;//窗口高度,比如1366*768笔记...
定位到 .el-table__fixed-header 给 其中的 cell 加上一个,与你 非 固定列的高度,相同的高度,即可解决问题。 3、解决问题的过程 一开始,我也是在网上搜索了很多相关问题的解决方法,但大多都是 说 需要进行重新渲染表格 进行类似于 ··· that.$refs.taskTable.doLayout(); ··· 的操作。 这种操作确实...
// tableHeight: 为 el-table 绑定的 height 高度; onMounted(() =>{//设置表格初始高度为 innerHeight-offsetTop - 表格底部与浏览器底部距离:68 + 顶部固定高度:50tableHeight.value = window.innerHeight - elTableRef.value.$el.offsetTop - 118;//监听浏览器高度变化window.onresize = () =>{ tableHe...
19 </el-table> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 上面这段代码是一个element-ui中tabele表格的形式,这里表头都是已经固定的, 如果每个页面都写上这么一段, 不同的是表头名字和字段,这样子就有点重复,而且页面的篇幅也就比较大了,于是把这块写成...
1. 理解Elementui表格高度策略 Elementui表格高度主要由三部分组成:列头(el-table-column)、行(el-table-row)和表头(el-table)。默认情况下,表格高度是固定的,但可以通过设置`height`属性来改变表格的高度。 2. 自定义表格高度 为了实现自适应高度,我们需要自定义表格的高度。可以通过设置`style`属性来实现。例如...
固定表头,只需要给表格设置高就行,即给el-table添加属性height="300",300这个高度值自由设置。 固定表头完整代码示例: <el-table :data="tableData" height="300"> <el-table-column prop="date" label="日期" width="150"> </el-table-column> ...
在开发中,需要表格控件根据浏览器高度进行调整,固定表头element 文档里面写的是 只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码。 <template><el-table:data="tableData"height="250"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-ta...