场景需求如下：

• 自适应页面高度，表头固定，body可滚动
• 使用table自带分页器
• 切换页码，请求对应数据
• 操作列自定义

注意:

若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。

建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。

<template><div class="index-container m20 box-sizing p20"><!-- 表格 --><a-tableclass="mt20":loading="tableConfig.loading":dataSource="tableConfig.dataSource":columns="columns"bordered:pagination="paginationProps":scroll="{ y: `calc(100vh - 300px)` }" ><!-- :scroll="{ y: `calc(100vh - 300px)` }"  是设置固定头部，body可滚动 --><template #bodyCell="{ column, text, record }"><template v-if="column.dataIndex === 'operation'"><!-- 操作列 --><edit-outlined class="blue cursor-pointer" /><delete-outlined class="red ml10 cursor-pointer" /><copy-outlined class="ml10 cursor-pointer" /></template></template></a-table></div>
</template>
<script>
import { reactive, toRefs, computed } from "vue";
import {DeleteOutlined,CopyOutlined,EditOutlined
} from "@ant-design/icons-vue";export default {name: "index",components: {DeleteOutlined,CopyOutlined,EditOutlined},setup() {// table相关数据const tableConfig = reactive({loading: false,total: 12,page: 1,pageSize: 10,dataSource:[{id: 0,number: "0",name: "0",}, {id: 1,number: "1",name: "1",},]});// 列配置const columns = [{title: "数字",dataIndex: "number",key: "number",width: 150},{title: "姓名",dataIndex: "name",key: "name",minWidth: 150},{title: "操作",dataIndex: "operation"}];// 分页器配置数据const paginationProps = reactive({total: tableConfig.total,pageSize: tableConfig.pageSize,hideOnSinglePage: false,showSizeChanger: false,showQuickJumper: false,showTotal: () => `共${tableConfig.total}条`,onChange: current => changePage(current)});/*** 切换页码 重新获取列表数据*/const changePage = current => {tableConfig.page = current;getList();};/*** 获取列表数据* 需要在此设置 tableConfig 必须的部分值： total、loading、dataSource*/const getList = ()=>{// Do something...}return {tableConfig,columns,paginationProps};}
};
</script>
<style lang="scss" scoped>
.red {color: red;
}
.blue {color: blue;
}
</style>