场景需求如下:
- 自适应页面高度,表头固定,body可滚动
- 使用table自带分页器
- 切换页码,请求对应数据
- 操作列自定义
注意:
若列头与内容不对齐或出现列重复,请
指定固定列的宽度 width
。如果指定 width 不生效或出现白色垂直空隙,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 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>