The scene requirements are as follows:
- Adaptive page height, fixed header, scrollable body
- Use the table's own pager
- Switch the page number and request the corresponding data
- Action column customization
Notice:
If column headers are misaligned with content or column duplication occurs , please
指定固定列的宽度 width
. If the specified width does not take effect or a white vertical gap appears, please try to suggest leaving a column with no width to adapt to the flexible layout , or check whether there are super long continuous fields that break the layout.
It is recommended to specify scroll.x as a fixed value or a percentage greater than the table width. Note that the sum of non-fixed column widths should not exceed scroll.x.
<template>
<div class="index-container m20 box-sizing p20">
<!-- 表格 -->
<a-table
class="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>