vue el-pagination实现分页

文章目录

• • 代码

还是element plus插件的功能，el-pagination。

代码

代码总共没几行，直接全拿来：

<template>
    <div class="blog-view-container">
      <!-- 标题区域 (可选，增加页面语义) -->
      <div class="page-header">
        <h2>会员专属答疑</h2>
      </div>
  
      <!-- 数据表格区域 -->
      <el-card shadow="never" class="table-card">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          v-loading="loading"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        >
          <!-- 仅展示 name 字段 -->
          <el-table-column prop="name" label="名称" min-width="200">
            <template #default="scope">
              <span class="name-text">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页插件区域 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[5, 10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue';
  // 假设您使用了 axios，如果没有请替换为您项目中的 request 工具
  import axios from 'axios';
  
  // --- 状态定义 ---
  const loading = ref(false);
  const tableData = ref([]);
  const total = ref(0);
  
  // 查询参数
  const queryParams = reactive({
    pageNum: 1, // 当前页码
    pageSize: 5, // 每页条数
  });
  
  // --- 核心逻辑 ---
  
  /**
   * 获取列表数据
   */
  const fetchData = async () => {
    loading.value = true;
    try {
      // 构建请求体，根据需求传入分页参数
      // 注意：后端接口通常接收 pageNum/pageNo 或 current，这里假设通用命名
      const params = {
        pageNum: queryParams.pageNum,
        pageSize: queryParams.pageSize,
      };
  
      // 发起 POST 请求
      const res = await axios.post('/mysite/api/blog/query', params);
  
      if (res.data.success) {
        tableData.value = res.data.data || [];
        total.value = res.data.total || 0;
      } else {
        console.error('请求失败:', res.data.message);
      }
    } catch (error) {
      console.error('网络异常:', error);
    } finally {
      loading.value = false;
    }
  };
  
  /**
   * 页码改变事件
   */
  const handleCurrentChange = (val) => {
    queryParams.pageNum = val;
    fetchData();
  };
  
  /**
   * 每页条数改变事件
   */
  const handleSizeChange = (val) => {
    queryParams.pageSize = val;
    queryParams.pageNum = 1; // 切换条数后通常重置回第一页
    fetchData();
  };
  
  // 初始化加载
  onMounted(() => {
    fetchData();
  });
  </script>
  
  <style scoped>
  .blog-view-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .page-header {
    margin-bottom: 20px;
  }
  
  .page-header h2 {
    font-size: 20px;
    color: #303133;
    font-weight: bold;
  }
  
  .table-card {
    border-radius: 8px;
  }
  
  /* 调整分页栏位置到右侧或居中，模仿截图效果 */
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end; /* 靠右对齐，如需居中改为 center */
    align-items: center;
  }
  
  .name-text {
    font-weight: 500;
    color: #303133;
  }
  </style>