vue3.0antdesign表格固定表头和⾼度⾃适应
步骤：
1、设置:scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"，y参数tableHeight是⼀个变量，由size计算，但是变量改变并不会使表格重新渲染，所以只能⼀次性赋值
export default {
antdesignvue 表格合计
data(){
return{
tableHeight : document.documentElement.clientHeight - 260 + 'px'
}
},
mounted () {
/** 控制table的⾼度 */
tableHeight = document.documentElement.clientHeight - 260 + 'px'
}
}
}
设置之后我们可以看到，渲染出来的标签多了⼀个⾏内样式
&: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布局