效果：
代码：
<a-table:columns="columns":data-source="dataSource":rowKey="(record) => record.id":pagination="pagination":loading="loading":scroll="{ x: '100%', y: 530 }"@change="handleTableChange"></a-table>
import {message } from "ant-design-vue";import {computed, defineComponent, ref } from "vue";export default defineComponent({name: "table",setup() {// 获取列表数据getDataList = async () => {loading.value = trueconst param = {};let res = await getPressureStationDataList(param);const {status, data, msg } = res;if (status !== 200) {message.error(msg);return;} else {dataSource.value = data.result;total.value = data.totalRows;current.value = data.pageIndex;pageSize.value = data.pageSize;}loading.value = false};//调用列表getDataList();// 列表分页const pagination = computed(() => ({total: total.value,current: current.value,pageSize: pageSize.value,showTotal: total =>`总共 ${total} 项`,defaultPageSize: 10,// pageSizeOptions: ['5', '10', '15', '20'], // 可不设置使用默认showSizeChanger:true, // 是否显示pagesize选择showQuickJumper: true, // 是否显示跳转窗}));// 列表当前页更改const handleTableChange = (pag, filters, sorter) => {current.value = pag.current;pageSize.value = pag.pageSize;getDataList();};return {dataSource,pagination,loading,}}}
