要实现的效果是页面加载后默认请求第一页的数据，点击第二页就再次请求后台接口得到第二页的数据，需要在<a-table>上绑定一个pagination对象，还有一个change方法监听页码改变事件，具体的示例如下：
<template>
<div>
<!-- 顶部搜索模块 -->
<a-form
ref="formRef"
layout="inline"
:model="formState"
:rules="rules2"
style="padding:10px 5px 20px;"
>
<a-form-item label="策略名称" name="tacticsName" style="padding:10px 5px;">
<a-input v-model:value="formState.tacticsName" placeholder="" />
</a-form-item>
<a-form-item style="padding:10px 5px;">
<a-button type="primary" @click="onSubmit">搜索</a-button>
<a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
</a-form-item>
</a-form>
<!-- 表格 -->
<a-table :columns="columns2" :data-source="data" :scroll="{ x: 1200}"
:loading="loading"
:pagination="pagination"
@change="handleTableChange"
>
<template #bodyCell="{column,record}">
<template v-if="column.key === 'operation'">
<a-tag color="#ff5500" @click="deleteTable(record)" style="cursor:pointer;" >删除</a-tag>
</template>
</template>
</a-table>
</div>
</template>
<script>
import {ref, reactive,onMounted,createVNode} from "vue";
import {listElectricity, delElectricity} from '@/api/index' //封装的api接口方法引入
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; //图标
import { Modal,message } from 'ant-design-vue'; //反馈模态弹窗
export default {
name: "Electricity",
setup() {
//表格的分页对象
const pagination=ref({
current:1,//当前页码
total:0,//总条数，用于分页计算,初值为0
pageSize:10,//页面容量
});
//页码改变事件
const handleTableChange = (pag, filters, sorter) => {
console.log("分页回调pag, filters, sorter",pag, filters, sorter)
// 可以在这里根据 pagination.current 和 pagination.pageSize 发送请求获取数据，
pagination.value.current = pag.current;//当前页码更新
console.log("当前的分页对象pagination",pagination.value)
getList();//重新获取列表
}
const loading = ref(false); //table表格的加载中效果
//搜索部分的表单
const formRef = ref();//搜索的表单模板引用
const formState = ref({
tacticsName: null,
});//搜索的表单对象
//规则2--搜索部分的表单验证--可以不填
const rules2 = {
// tacticsName: {required: true, message: 'xx必填'},
};
//搜索按钮点击提交
const onSubmit = () => {
formRef.value
.validate()
.then(() => {
console.log('查询对象formState：', formState);
//调用查询列表方法
pagination.value.current=1;//分页的当前页码！！！--查询点击把页码重置！！！！！！！
getList();//获取查询列表
})
.catch(error => {
console.log('error', error);
});
};
//搜索部分重置按钮点击
const resetForm = () => {
formRef.value.resetFields();
};
//获取查询列表
const getList=()=>{
console.log("formState:",formState.value)
let obj=formState.value; //查询传给后台的参数对象
obj.pageNum=pagination.value.current;//分页的当前页码！！！
obj.pageSize=pagination.value.pageSize;//分页的容量，每页显示条数！！！
console.log("1-查询列表传参obj：",obj)
loading.value = true;//出现加载中效果
// 接口
listElectricity(obj).then(response => {
console.log("1-查询列表返回response：",response)
data.value=response.rows //表格数据源赋值
loading.value =false;//关闭加载中效果
pagination.value.total = response.total;//分页的总条数赋值
});
}
// 表格列数据
const columns2 = [
{
title: '策略名称',
dataIndex: 'tacticsName',
key: '2',
},
{
title: '提醒标准',
dataIndex: 'cautionSum',
key: '6',
},
{
title: '操作',
key: 'operation',
fixed: 'right',
width: 150,
},
];
const data = ref([])// 表格数据源
//删除表格中的某一行
function deleteTable (row){
console.log("删除表格中的一条数据对象row",row)
//删除提示弹窗
Modal.confirm({
title: '是否确认删除该条数据项?',
icon: createVNode(ExclamationCircleOutlined),
content:'',// 'Some descriptions',
okText: '确定',
cancelText: '取消',
onOk() {
console.log('OK');
let id=row.id //要删除对象的id
console.log("删除对象的id:",id)
//接口
delElectricity(id).then(response => {
console.log("5-删除回调response：",response)
if(response.code==200){
message.success('删除成功');
getList();//重新获取列表
}
});
},
onCancel() {
console.log('Cancel');
},
});
}
onMounted(async () => {
getList();//获取查询列表！！！！！！
});
return {
formRef,
formState,
onSubmit,
resetForm,
rules2,
getList,
loading,
columns2,
data,
deleteTable,
pagination,//表格的分页对象
handleTableChange,//分页改变事件
}
},
}
</script>
<style scoped> </style>