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布局