<template>
<a-table
:columns="columns"
:dataSource="data"
:pagination="pagination"
@change="handleTableChange"
>
</a-table>
</template>
<script>
export default {
data() {
return {
// 表格列定义
columns: [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
// 更多列定义...
],
// 表格数据
data: [], // 从服务器获取数据填充
// 分页对象
pagination: {
current: 1,
pageSize: 10,
total: 0, // 从服务器获取总数据量
showTotal: (total, range) => `${range[0]}-${range[1]} 条,总共 ${total} 条`,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: ['10', '20', '50', '100'],
onShowSizeChange: (current, size) => this.changePageSize(size),
onChange: (page, pageSize) => this.changePage(page, pageSize),
},
};
},
methods: {
// 表格分页变化时的回调
handleTableChange(pagination, filters, sorter) {
const pager = { ...this.pagination };
pager.current = pagination.current;
this.pagination = pager;
// 根据分页信息从服务器获取数据
this.fetchData(pagination.current, pagination.pageSize);
},
// 改变分页大小
changePageSize(size) {
this.pagination.pageSize = size;
this.fetchData(this.pagination.current, this.pagination.pageSize);
},
// 改变页码
changePage(page, pageSize) {
this.pagination.current = page;
this.fetchData(page, pageSize);
},
// 从服务器获取数据的方法
fetchData(page, pageSize) {
// 这里应该调用API获取数据,然后更新data和pagination.total
// 模拟数据获取
this.data = []; // 获取到的数据
this.pagination.total = 100; // 服务器返回的数据总数
},
},
mounted() {
this.fetchData(this.pagination.current, this.pagination.pageSize);
},
};
</script>
<template>
<a-table
:scroll="{ y: 350 }"
:style="{fontSize: '15px'}"
:columns="columns"
:row-key="record => record.id"
:data-source="dataSource"
:pagination="pagination"
:loading="loading"
@change="handleTableChange"
>
</a-table>
</template>
<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
import axios from 'axios';import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
export default defineComponent({
setup: function () {
// 表格列定义
columns: [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},const data = ref();
const pagination = ref({
current: 1,
pageSize: 10,
total: 0,
showTotal: (total: number) => `共 ${total} 条记录`,
showSizeChanger: true,
pageSizeOptions: ['10', '20', '50', '100'],
onShowSizeChange: (current: any, size: any) => changePageSize(size),
onChange: (page: any) => changePage(page),
});
// 改变分页大小
const changePageSize = (size: any) =>{
pagination.value.pageSize = size;
handleQuery({
page: pagination.value.current,
size: pagination.value.pageSize,
});
}
// 改变页码
const changePage = (page: any) =>{
pagination.value.current = page;
handleQuery({
page: pagination.value.current,
size: pagination.value.pageSize,
});
}
const handleTableChange = (pagination: any) => {
handleQuery({
page: pagination.current,
size: pagination.pageSize,
});
};const loading = ref(false);
const handleQuery = (params: any) => {
// 这里应该调用API获取数据,然后更新data和pagination.total
// 模拟数据获取
data.value = []; // 获取到的数据
// 重置分页按钮
pagination.value.current = params.page;
pagination.value.total = data.total;
};onMounted(() => {
handleQuery({
page: 1,
size: pagination.value.pageSize,
});
});return {
data,
pagination,
columns,
loading,handleTableChange,
handleQuery,
};
},
});
</script>