vue3 ant-design-vue 表格实现伸缩盒子滚动

table组件很常用，需要根据业务实现一些场景，如图，想必是大家常用的

<a-table
        class="flex-table"
        bordered
        :columns="columns" 
        :data-source="tableData" 
        :pagination="pagination" 
        :scroll="{y:100 }">
        <template #bodyCell="{ column, row }">
          <template v-if="column.dataIndex === 'operations'">
           操作列
          </template>
        </template>
  </a-table>

需要父盒子设置 display: flex, 并给table组件添加 class="flex-table"和:scroll="{y:0 } (y设置任意值都可以,设置这个后，thead，tbody，会生成在两个div下)， 再引入下面的css即可

.flex-table {
 flex: 1;
 overflow: hidden;
 > div {
   height: 100%;
 }

 .ant-spin-container {
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 .ant-table  {
   flex: 1;
   overflow: hidden;
 }
 .ant-table-container {
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 .ant-table-body {
   flex: 1;
   overflow: hidden;
   max-height: unset !important;
 }
}