Antd vue 和 element的表格高度根据浏览器高度变化

1. antdv表格根据scroll里y的值来控制表格高度，当内容超出y值后表格就会出现滚动条。需要为表格的y提供一个会随浏览器高度变化而变化的参数，窗口越小表格允许展现的高度也越小，例子中是由updateYHeight计算属性来控制的。

<a-table:columns="columns":data-source="data":scroll="{ x: true, y: updateYHeight }":pagination="pagination"@change="handleTableChange"
>

2. 给表格的外层容器添加ref，方便监听外层容器的高度，从而改变表格的高度。

注意：

外层容器高度需要能够随浏览器高度变化而变化
可以给最外层容器的高度设为100vh，其中的表格外层盒子高度设为90%，就可以使表格外层容器的高度随浏览器高度变化而变化了
总之就是最外层盒是固定值，中层的表格外层盒用百分比%设置高度，最里层的表格高度根据中层的高度设置

<div class="bottom" ref="tableBox"><a-table:columns="columns":data-source="data":scroll="{ x: true, y: updateYHeight }":pagination="pagination"@change="handleTableChange"></a-table>
</div>

3. 在data中设置一个名为tableBoxHeight的属性值来存放外层容器高度，初始值为0，在html完成渲染后在mounted中获取表格外层盒子的高度作为tableBoxHeight的属性值，并注册一个监听浏览器变化的事件，一变化就重置tableBoxHeight的属性值。通过计算属性得到最终需要的表格的高度值。

注意：

this.tableBoxHeight- 175中的175不是固定的，根据自己的需要设置
记得在unmounted中解除监听，避免影响其他页面（vue3是unmounted，vue2是destroyed）

data() {return {tableBoxHeight: 0,};},
mounted() {this.tableBoxHeight = this.$refs.tableBox.clientHeight;window.addEventListener("resize", this.renewTableBoxHeight);
},
unmounted() {window.removeEventListener("resize", this.renewTableBoxHeight);
},
methods: {renewTableBoxHeight() {this.tableBoxHeight = this.$refs.tableBox.clientHeight;},
},
computed: {updateYHeight() {return this.tableBoxHeight- 175;},
},

提示：element的表格是一样的原理，element的表格是把updateYHeight的值赋给max-height。

<el-table :data="tableData" style="width: 100%" :max-height="updateYHeight">

Antd vue 和 element的表格高度根据浏览器高度变化相关推荐

设置元素高度跟浏览器高度一致
场景一:在vue中,设置内部元素默认高度与框架内部高度保持一致,子元素超出则显示滚动条滚动,默认父元素高度不变,撑高为框架高度解决防范: <div :style="{ 'height ...
html图片自适应浏览器高度,css如何高度自适应浏览器高度？
高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容. 在IE7+及chrome.firefox等浏览器中, ...
怎么让DIV的高度为浏览器高度
一.困惑了我很久的一个问题,本来想做一个导航,但是死活不能为浏览器高度,后来判断浏览器高度什么的,这里最重要的就是属性position:absolute <body> <fo ...
html表头纵向,vue、element实现表格表头纵向显示
大多数情况,我们的管理端都有表格展示数据,然而表格的展示基本都是表头横向展示,然后相应的数据一行一行排列在下方,我们先看一下element官网的el-table的样子: 那么我们如果想要让表头纵向展示 ...
html css高度自适应浏览器高度,Div + CSS高度自适应解决方法_html/css_WEB-ITnose
转这几天用div+css写网站,样子上中下,中间是个左中右3列,可这3列不是等高偏巧有不同颜色的背景,结果就是ie.firefox...这些浏览器无一例外的现实的效果都是长短不齐,如何让这3列可以 ...
DIV高度自适应浏览器高度方法
*{margin: 0;padding: 0; } html, body{width: 100%;height: 100%; } div{position: absolute;top: 0;left: ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
vue element计算表格合计问题
vue element计算表格合计问题问题:当表格的el-table-column标签下的属性prop属性值为'对象.属性'时,将不能自动合计. 例如: <el-tableborderv-lo ...
vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和
vue element el-table 表格勾选获取几列数据求和 el-table表格勾选求和先看案例如下图所示:el-table 勾选后求出支付金额数据,计算出总金额数据. 我们来一步步分析方便 ...

Antd vue 和 element的表格高度根据浏览器高度变化

Antd vue 和 element的表格高度根据浏览器高度变化相关推荐

最新文章

热门文章