分页实现vue

使用 v-pagination 组件（Element UI）

安装 Element UI：

npm install element-ui

在 Vue 文件中引入并配置分页组件：

<template>
  <div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 根据 currentPage 和 pageSize 请求数据
    }
  }
};
</script>

使用 b-pagination 组件（Bootstrap Vue）

安装 Bootstrap Vue：

npm install bootstrap-vue

在 Vue 文件中引入并配置分页组件：

<template>
  <div>
    <b-pagination
      v-model="currentPage"
      :total-rows="total"
      :per-page="pageSize"
      @change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    fetchData() {
      // 根据 currentPage 和 pageSize 请求数据
    }
  }
};
</script>

手动实现分页逻辑

如果不依赖 UI 库，可以手动实现分页逻辑：

<template>
  <div>
    <div v-for="item in paginatedData" :key="item.id">
      {{ item.name }}
    </div>
    <div>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 100,
      items: [] // 假设这是从后端获取的数据
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.items.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchData();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchData();
      }
    },
    fetchData() {
      // 根据 currentPage 和 pageSize 请求数据
    }
  }
};
</script>

使用 v-data-table 分页（Vuetify）

安装 Vuetify：

npm install vuetify

在 Vue 文件中配置表格分页：

<template>
  <v-data-table
    :items="items"
    :headers="headers"
    :page.sync="currentPage"
    :items-per-page="pageSize"
    :server-items-length="total"
    @update:page="handlePageChange"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
      items: [],
      headers: [
        { text: 'ID', value: 'id' },
        { text: 'Name', value: 'name' }
      ]
    };
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    fetchData() {
      // 根据 currentPage 和 pageSize 请求数据
    }
  }
};
</script>

后端分页（API 请求）

通常分页需要后端配合，通过 API 传递分页参数：

<script>
export default {
  methods: {
    fetchData() {
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize
      };
      axios.get('/api/data', { params })
        .then(response => {
          this.items = response.data.items;
          this.total = response.data.total;
        });
    }
  }
};
</script>

分页样式自定义

可以通过 CSS 自定义分页样式：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
}
.pagination button:disabled {
  opacity: 0.5;
}