当前位置：首页 > VUE

vue实现分页列表打印

2026-02-23 16:49:37VUE

Vue 实现分页列表打印

分页功能实现

使用 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 {
      items: [], // 从API获取的数据
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.items.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    }
  }
};
</script>

打印功能实现

通过浏览器原生打印API实现打印功能，结合CSS控制打印样式：

vue实现分页列表打印

methods: {
  printList() {
    const printContent = document.getElementById('printable-area').innerHTML;
    const originalContent = document.body.innerHTML;
    document.body.innerHTML = printContent;
    window.print();
    document.body.innerHTML = originalContent;
  }
}

添加打印按钮和打印区域：

vue实现分页列表打印

<button @click="printList">打印列表</button>
<div id="printable-area">
  <h2>打印列表</h2>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

打印样式优化

在组件或全局CSS中添加打印样式，确保打印效果符合需求：

@media print {
  body * {
    visibility: hidden;
  }
  #printable-area, #printable-area * {
    visibility: visible;
  }
  #printable-area {
    position: absolute;
    left: 0;
    top: 0;
  }
  button {
    display: none;
  }
}

分页打印控制

如果需要强制分页打印，可以在CSS中添加分页控制：

@media print {
  li {
    page-break-inside: avoid;
  }
  ul {
    page-break-after: always;
  }
}

完整示例整合

将分页和打印功能整合到同一个组件中，确保用户可以先浏览分页数据，再打印完整列表或当前页数据。根据实际需求调整打印内容的选择逻辑。

标签: 分页列表

分享给朋友：

vue实现列表权限

实现列表权限的基本思路在Vue中实现列表权限通常涉及根据用户角色或权限动态渲染列表内容。核心逻辑是通过权限判断控制列表项的显示、隐藏或操作权限。权限数据管理使用Vuex或Pinia存储全局权限…

react 如何分页

分页实现方法在React中实现分页功能可以通过多种方式完成，具体取决于数据来源（如API或本地数据）和UI库的选择。以下是常见的实现方法：使用本地数据分页对于存储在组件状态或Context中…

vue实现后台分页

Vue 实现后台分页的方法分页组件与数据绑定在 Vue 中实现后台分页通常需要结合分页组件和后端 API。使用 el-pagination（Element UI）或自定义分页组件，通过 v-mod…

vue实现文本列表

Vue 实现文本列表的方法 Vue 可以通过多种方式实现文本列表的渲染和管理，以下是几种常见的方法：使用 v-for 指令渲染列表通过 v-for 指令可以动态渲染数组或对象中的文本列表。…

vue实现列表页

Vue 实现列表页的方法数据绑定与渲染使用 v-for 指令动态渲染列表数据，结合 :key 确保渲染性能。示例代码： <template> <ul> <…

vue page 实现分页

实现 Vue 分页功能的方法使用 Element UI 的分页组件安装 Element UI 后，可以直接使用 el-pagination 组件实现分页功能。 <template>…

vue实现分页列表打印