起因

最新换了工作，新项目强制使用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”