antd?table動(dòng)態(tài)修改表格高度的實(shí)現(xiàn)
更新時(shí)間：2023年07月13日 15:03:34 作者：神探小白牙
本文主要介紹了antd?table動(dòng)態(tài)修改表格高度的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
antd中,flex布局不生效,得計(jì)算表格高度并且去賦值從而動(dòng)態(tài)
<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里面計(jì)算表格高度
//計(jì)算表格高度
compute() {
this.$nextTick(() => {
let minBox = $(".top_box")[0].clientHeight; // 整個(gè)大盒子的高度
let maxBox = $(".video-content")[0].clientHeight; //其余高度
this.tableHeight = maxBox - minBox - 220 + "px"; // tab頁(yè)高度 + 分頁(yè)高度 + margin
});
},到此這篇關(guān)于antd table動(dòng)態(tài)修改表格高度的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)antd table動(dòng)態(tài)修改表格高度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用過vue的朋友都知道，vue父組件更改props的值，子組件是會(huì)刷新的，而react就未必，今天通過一個(gè)例子給大家介紹react父組件更改props子組件無法刷新原因,需要的朋友可以參考下2022-09-09
本篇文章主要介紹了深入掌握 react的 setState的工作機(jī)制，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
React-Native之定時(shí)器Timer的實(shí)現(xiàn)代碼
本篇文章主要介紹了React-Native之定時(shí)器Timer的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了React Redux Hooks的使用詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
Next+React項(xiàng)目啟動(dòng)慢刷新慢的解決方法小結(jié)
本文主要介紹了Next+React項(xiàng)目啟動(dòng)慢刷新慢的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
React實(shí)現(xiàn)模糊搜索和關(guān)鍵字高亮的示例代碼
這篇文章主要為大家詳細(xì)介紹了React如何實(shí)現(xiàn)模糊搜索和關(guān)鍵字高亮的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
React-router4路由監(jiān)聽的實(shí)現(xiàn)
這篇文章主要介紹了React-router4路由監(jiān)聽的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了React-three-fiber的使用初體驗(yàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
一個(gè)路由就是一個(gè)映射關(guān)系(key:value),key為路徑, value可能是function或component,本文給大家介紹React 路由react-router-dom詳解,感興趣的朋友跟隨小編一起看看吧2024-01-01