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

港澳地接

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

1.         <div class="table1" v-loading="loading" v-show="showTable">
   
2.               <a-table
   
3.                 :columns="columns"
   
4.                 :data-source="tableData"
   
5.                 size="middle"
   
6.                 :pagination="pagination"
   
7.                 :scroll="{
   
8.                   x: columns.length > 5 ? '110%' : null,
   
9.                   y: tableHeight,
   
10.                 }"
    
11.                 style="width: 100%"
    
12.               ></a-table>
    
13.             </div>

复制代码

data 里面定义变量

1.       tableHeight: "100px", //表格最小高度

复制代码

1.   created() {
   
2.     this.compute();
   
3.     window.addEventListener("resize", () => {
   
4.       this.compute();
   
5.     });
   
6.   },

复制代码

在methods里面计算表格高度

1. //计算表格高度
   
2.     compute() {
   
3.       this.$nextTick(() => {
   
4.         let minBox = $(".top_box")[0].clientHeight;  // 整个大盒子的高度
   
5.         let maxBox = $(".video-content")[0].clientHeight; //其余高度
   
6.         this.tableHeight = maxBox - minBox - 220 + "px"; // tab页高度 + 分页高度 + margin
   
7.       });
   
8.     },

复制代码

到此这篇关于antd table动态修改表格高度的实现的文章就介绍到这了,更多相关antd table动态修改表格高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/292052zsj.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！