vue3.0 ant design 表格固定表頭和高度自適應

ant官方提供 :scroll="{ x: num, y: num }" 來設置表格的高度和寬度，可實際開發中有表格隨窗口的高度變化而改變的,而官方並沒有對應的api。所以通過不斷嘗試，還是找到了一個解決辦法，在此記錄下。
官方固定表頭:https://2x.antdv.com/components/table-cn/#components-table-demo-fixed-header

步驟：
1、設置:scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"，y參數tableHeight是一個變量，由window.onresize計算，但是變量改變並不會使表格重新渲染，所以只能一次性賦值

export default {
  data(){
    return{
      tableHeight : document.documentElement.clientHeight - 260 + 'px'
    }
  },
  mounted () {
    /** 控制table的高度 */
    window.onresize = function () {
       tableHeight = document.documentElement.clientHeight - 260 + 'px'
    }
  }
}

設置之后我們可以看到，渲染出來的標簽多了一個行內樣式

2、加上以下樣式,其中v-bind()是vue3.0的css中獲取js參數語法，參照：https://github.com/vuejs/rfcs/pull/231

&:deep(.ant-table-body) {
  max-height:v-bind(tableHeight) !important;
}
&:deep(.ant-table-body-inner) {
  max-height:v-bind(tableHeight) !important;
}

3、最終添加的樣式會覆蓋掉原來的行內樣式

這樣就解決ant表格高度自適應問題了。

另外ant表格字會換行，有時會導致布局錯亂,加上以下解決

&:deep(.ant-table-thead) > tr > th {
  white-space: nowrap !important;// 防止IE等瀏覽器不支持'max-content'屬性 導致內容換行
}

總結：利用vue3.0 v-bind()直接修改ant某些標簽類樣式，從而達到預期效果。
注意：tableHeight參數貌似只能設在data上，setup會找不到參數。高度減/加多少，根據自己項目實際情況調試，最好分頁欄和表格內容分開，使用flex布局