antd table动态修改表格高度的实现
更新时间:2023年07月13日 15:03:34 作者:神探小白牙
本文主要介绍了antd table动态修改表格高度的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
antd中,flex布局不生效,得计算表格高度并且去赋值从而动态
<div class="table1" v-loading="loading" v-show="showTable"> <a-table :columns="columns" :data-source="tableData" size="middle" :pagination="pagination" :scroll="{ x: columns.length > 5 ? '110%' : null, y: tableHeight, }" style="width: 100%" ></a-table> </div>
data 里面定义变量
tableHeight: "100px", //表格最小高度
created() { this.compute(); window.addEventListener("resize", () => { this.compute(); }); },
在methods里面计算表格高度
//计算表格高度 compute() { this.$nextTick(() => { let minBox = $(".top_box")[0].clientHeight; // 整个大盒子的高度 let maxBox = $(".video-content")[0].clientHeight; //其余高度 this.tableHeight = maxBox - minBox - 220 + "px"; // tab页高度 + 分页高度 + margin }); },
到此这篇关于antd table动态修改表格高度的实现的文章就介绍到这了,更多相关antd table动态修改表格高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章
react中使用Modal.confirm数据不更新的问题完美解决方案
这篇文章主要介绍了react中使用Modal.confirm数据不更新的问题解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09详解React项目的服务端渲染改造(koa2+webpack3.11)
本篇文章主要介绍了详解React项目的服务端渲染改造(koa2+webpack3.11),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论