iview table 自適應高度


// 思路:1.在iview-table的外層定義一枚父元素,對父元素的高度做響應式處理 // 2.mouted階段,獲取父元素高度並賦給iview-table,且設置window.resize事件也觸發此方法


// 示例: <div>
    <div class="custom-head"></div>
    <div class="custom-body">
        <i-table v-bind:columns="" v-bind:data="" size="small" v-bind:height="tableHeight" stripe border></i-table>
    </div>
</div>



.custom-body {
    height: calc(100vh - 305px);
}

.ivu-table-tip {
    overflow-x:hidden;
}



mounted() {
    let _this = this;
    this.setTableHeight();
    window.onresize = () => {
        _this.setTableHeight();
    }
},



methods: {
    setTableHeight() {
        this.tableHeight = parseInt($(".custom-body").css("height"));
    }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM