Ant Design Vue的Table表格动态分页

要实现的效果是页面加载后默认请求第一页的数据,点击第二页就再次请求后台接口得到第二页的数据,需要在<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值