element中table高度自適應問題

由官方文檔，我們可知table想要設置高度，就必須在table里面設置高度

所以在應用到自適應高度也需要結合api實現
在table部分定義變量

在data中定義!
在data中定義常量顯然不合理

因此我們定義一個變量

     //table中
      <el-table 
            v-show="tabadd" 
            :data="tableData" 
            style="width: 100%" 
            border
            :height="tableConfig.height"
            show-summary
            :summary-method="getSummaries"
            :cell-style="{textAlign:'right'}"
        >

        // data中
        // 自適應高度
        tableConfig:{
          isLoading:true,
          height:window.innerHeight-159  // 下面剩余多少空白部分（即最下面距離底部有多少距離）
        },

雖然這時候，已經可以根據窗體大小，高度動態變化，但是，還要每次刷新才行……

所以，我們需要加一個監聽器即可，監聽窗體大小變化，一旦變化就執行方法重新設定height

// ↓在methods里面
getHeight () {
  this.tableConfig.height = window.innerHeight - 159
}
//↑在methods里面
// 窗體大小變化就執行getHeight方法即可
created () {  // 初始化開始監聽自適應高度數據
    window.addEventListener('resize', this.getHeight)
  },
destroyed () {  // 離開時銷毀高度自適應監聽
    window.removeEventListener('resize', this.getHeight)
  }

這里還有個需要注意的地方，就是修改下el-table的css，否則table會有很多留白，看起來體驗不是很好

這里使用了/deep/ ，否則我們是修改不了 element自帶的樣式

      /deep/ .el-table {
  		.el-table__body{
            height: 100%;
          }
		}

本文來源：https://blog.csdn.net/qq_43519735/article/details/105513821