antd table动态修改表格高度的实现

antd中,flex布局不生效,得计算表格高度并且去赋值从而动态

<div 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,}' ></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动态修改表格高度内容请搜索好吧啦网以前的文章或继续浏览下面的相关文章希望大家以后多多支持好吧啦网！