vue实现分页多元

Vue 实现分页功能的方法

分页功能是前端开发中常见的需求，尤其在数据量较大的情况下。Vue 提供了多种方式来实现分页功能，以下是一些常见的方法。

使用 v-for 和计算属性

通过计算属性对数据进行分页处理，结合 v-for 渲染分页后的数据。

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

<script>
export default {
  data() {
    return {
      data: [], // 原始数据
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.data.length / this.itemsPerPage);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.data.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    }
  }
};
</script>

使用第三方库

可以借助第三方库如 vue-paginate 或 element-ui 的分页组件快速实现分页功能。

安装 element-ui：

npm install element-ui

使用 el-pagination 组件：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="itemsPerPage"
      :total="data.length"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
import { Pagination } from 'element-ui';

export default {
  components: {
    'el-pagination': Pagination
  },
  data() {
    return {
      data: [], // 原始数据
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.data.slice(start, end);
    }
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
    }
  }
};
</script>

结合后端 API

如果数据来自后端 API，可以在请求时传递分页参数，后端返回分页后的数据。

<template>
  <div>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="fetchData(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="fetchData(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      currentPage: 1,
      itemsPerPage: 10,
      totalPages: 0
    };
  },
  created() {
    this.fetchData(1);
  },
  methods: {
    async fetchData(page) {
      const response = await axios.get(`/api/data?page=${page}&limit=${this.itemsPerPage}`);
      this.data = response.data.items;
      this.totalPages = Math.ceil(response.data.total / this.itemsPerPage);
      this.currentPage = page;
    }
  }
};
</script>

动态调整每页显示数量

允许用户动态调整每页显示的数据量，提升用户体验。

<template>
  <div>
    <select v-model="itemsPerPage" @change="resetPage">
      <option value="5">5 条/页</option>
      <option value="10">10 条/页</option>
      <option value="20">20 条/页</option>
    </select>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.data.length / this.itemsPerPage);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.data.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    },
    resetPage() {
      this.currentPage = 1;
    }
  }
};
</script>

以上方法可以根据实际需求选择或组合使用，灵活实现分页功能。