在Element UI中,为el-table设置固定高度可以通过以下几种方式实现。以下是详细的步骤和代码示例: 1. 确定el-table的当前高度设置 首先,你需要明确当前el-table的高度设置方式。如果它依赖于容器的高度或者没有显式设置高度,那么可能需要通过CSS来明确指定高度。 2. 使用CSS类定义固定高度 你可以创建一个CSS类来定义...
然后我们使用Element.getBoundingClientRect()这个接口来获取自适应区域的高度,设置为表格高度,这样即可达到自适应高度固定表头的效果。 export default { data () { return { tableHeight: 0, tableData: [ // xxx 表格数据 ] } }, mounted () { this.calHeight() }, methods: { calHeight () { this....
这里文档只给了一种固定高度250px的解决方案,实际应用大多数是需要自适应占满父元素,超出滚动固定表头的。 值得一提的是,height可以动态绑定,我的解决方案是给表格包一个父元素,并绑定一个值100%给height。 height:Table的高度,默认为自动高度。如果height为number类型,单位px;如果height为string类型,则这个高度会设...
2.表头固定,表身超过高度自动滚动 直接在el-table标签里增加height:100%就可以了。
element-ui el-table 表格固定 el-table__fixed 高度计算 bug 100%又不对,不百分百又不对,看看这样吧。
实现自适应高度固定表头的关键步骤包括：1. 使用CSS设置容器为弹性布局，并让表格容器绝对定位。2. 使用JavaScript计算容器高度，并将其设置为el-table的height属性。3. 监听窗口resize事件，定期或在特定操作后重新计算高度。此外，还需考虑其他可能影响容器高度的因素，如DOM元素变动和样式修改。为确保解决...
但是这个高度是固定的,遇到分辨率不一样的屏幕就会效果不一样 因为高度是固定的,当遇到只有一条数据的会出现下面大量留白的情况 最终解决方案 1、当表格的body高于视图高度时 tableHeight = 获取视图的高度 - 可滑动的高度 - 视图内其他的高度 2、当表格的body不高于视图高度时 tableHeight = .el-table__body的...
<el-table:data="tableData"id="table":height='tableH'></el-table> 2.获取浏览器高度并监听浏览器resize变化 getTableHeight函数里根据元素做了一些计算处理,获取浏览器高度并计算得到表格所用高度。 data:function(){return{tableH:"",}}mounted(){this.getTableHeight();window.addEventListener('resize',thi...