vue中表格自適應屏幕一屏顯示

需求：表格始終自適應一屏，

思路：獲取屏幕高度-除表格之外的其他高度。

難點：1、綠框的搜索框在小屏幕時會折疊 2、需要隨屏幕放大縮小表格要跟着變化

實現：

HTML代碼：

<div ref="header">
//里面是綠框里的代碼
</div>
<div :height="tableHeight">
//表格代碼
</div>

js代碼：

<script>
export default {
  data() {
    return {
      tableHeight:this.tableHeight
     }
   },
 mounted() {
    this.tableHeight = document.body.clientHeight -(this.$refs.header.offsetHeight + 230) +"px";//其中230是除紅框和綠框之外的高度

    window.onresize = () => {
      return (() => {
      this.tableHeight = document.body.clientHeight -(this.$refs.header.offsetHeight + 230) +"px";
      })();
    }
 }
</script>

 如果：綠框高度固定不變則直接

mounted() {
  this.tableHeight = window.innerHeight - 255 + "px"; //255即表格之外的固定高度
  window.onresize = () => {
  return (() => {
  this.tableHeight = window.innerHeight - 255 + "px";
  })();
  };
},