起因
最新换了工作，新项目强制使用AntDesignVue作为组件库，使用惯elementUI之后，发现antV的table高度设置很难受，例如高度需要在scroll中设置y为数字，而且数据不多时，也不能撑到设置的值，感觉table组件悬在空中；并且如果有可收起搜索栏时，需要在收起展开时重新计算，emm，作为一个懒人，并不觉得在js中计算css高度是个优雅的方式，所以试着用css来解决这个问题。
实测工作良好，table添加分页或者#summary都可以很好的显示，最下方有示例
第一步，添加less文件
在main.ts中引入了该less文件（ps：antDesignVue使用了less，所以项目也跟着用了less，如果读者用的其他，把下面文件变形就好）
/* 修改table相关样式，使之可以自适应大小 */.ant-table-wrapper {position: relative;height: 100%;.ant-spin-nested-loading {height: 100%;.ant-spin-container {height: 100%;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden;.ant-table {flex: 1;overflow: hidden;}.ant-table-container {height: 100%;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden;.ant-table-body {flex: 1;overflow: auto !important;}}}}}
第二步，使用antDesignVue的Table组件，注意需要添加sticky属性
<template><div class="abc"><a-table :dataSource="dataSource" :columns="columns" sticky :scroll="{ x: 'max-content' }"><template #summary><a-table-summary fixed="top"><a-table-summary-row><!-- 该 :index="0" 为使summary中的第0项跟随colimus中的第0项fixed="left"所设 --><a-table-summary-cell :index="0">Total</a-table-summary-cell><a-table-summary-cell><a-typography-text type="danger">132</a-typography-text></a-table-summary-cell><a-table-summary-cell><a-typography-text>465</a-typography-text></a-table-summary-cell></a-table-summary-row></a-table-summary></template></a-table></div></template><script setup lang="ts">const dataSource = [{key: '1',name: '胡彦斌',age: 32,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 56,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'}]const columns = [{title: '姓名',dataIndex: 'name',key: 'name',fixed: 'left',width: 200},{title: '年龄',dataIndex: 'age',key: 'age',width: 500},{title: '住址',dataIndex: 'address',key: 'address',width: 600}]</script><style scoped>.abc {height: 300px;}</style>
示例
遇到的问题
当使用sticky，表头宽度是内容撑起来的，所以没内容而表头较多（一行放不下，或者有左右滚动条）时，表头会堆叠到一起，比较简单的处理方式是 将sticky根据dataSource.length作判断，即 :sticky=“dataSource.length > 0”
