vue 么实现分页打印每页带表头

### 回答1：
要实现分页打印每页带表头，可以使用 Vue.js 的自定义指令和 CSS 的 @media print 属性。

首先，在 Vue.js 中创建一个自定义指令，用于将分页打印样式应用于需要打印的元素。例如：

Vue.directive('print', {
  bind: function(el, binding, vnode) {
    el.printStyle = document.createElement('style')
    el.printStyle.setAttribute('media', 'print')
    document.head.appendChild(el.printStyle)
    el.printStyle.sheet.insertRule('@page { size: A4; margin: 0; }', 0)
    el.printStyle.sheet.insertRule('@media print { body { visibility: hidden; } }', 1)
    el.printStyle.sheet.insertRule('@media print { .page { visibility: visible; } }', 2)
    el.printStyle.sheet.insertRule('.page { page-break-after: always; }', 3)
  },
  unbind: function(el, binding, vnode) {
    document.head.removeChild(el.printStyle)
    el.printStyle = null
  }
})

在这个自定义指令中，我们首先创建一个 style 元素，并将其设置为打印媒体类型。然后，我们插入一些 CSS 规则，以实现以下效果：

- 将页面大小设置为 A4，同时将页边距设置为 0；
- 将页面内容设置为不可见，以便在打印时隐藏非打印内容；
- 将所有带有 .page 类名的元素设置为可见，并在它们之间插入分页符；
- 将所有带有 .page 类名的元素之后的内容设置为不可见。

接下来，在需要分页打印的元素上添加 .page 类名，并使用 v-print 指令将其转换为打印样式。例如：

<div v-print>
  <div class="page">
    <h1>表头</h1>
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
  <div class="page">
    <h1>表头</h1>
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
  <!-- 更多 .page 元素 -->
</div>

在这个示例中，我们将需要分页打印的元素包装在一个包含 v-print 指令的 div 元素中。然后，我们在每个需要打印的表格之前添加一个带有 .page 类名的 div 元素，以将其转换为打印页面。在每个 .page 元素中，我们包含一个表头和一个表格，以及任何其他需要打印的内容。

最后，我们可以使用浏览器的打印功能来打印分页内容，每页都会自动包含表头。

### 回答2：
Vue中实现分页打印每页带表头可以通过以下步骤来实现：

1. 首先，准备好需要打印的数据以及表头，可以将它们存储在Vue的数据对象中。

2. 在Vue的模板中，使用一个table来展示需要打印的数据，并在表格中添加表头。

3. 使用Vue提供的计算属性computed来对需要打印的数据进行分页处理。根据每页显示的行数，将数据分成多个页，每页存储在一个数组中。

4. 在Vue的方法methods中，编写一个打印函数。该函数会根据当前页数，获取对应的数据数组，并将其渲染到打印预览页面中。

5. 在打印预览页面中，使用CSS样式设置每一页打印的格式，包括设置每页的大小、页眉、页脚等。可以使用@media print媒体查询来适应打印样式。

6. 在打印预览页面中，使用Vue的v-for指令遍历当前页的数据数组，将数据逐行渲染到打印预览页面中的table中。

7. 为了实现每页带表头，需要在每页的table中单独添加表头。可以通过条件判断，只在每页的第一行添加表头。

8. 最后，通过window.print()方法来触发浏览器的打印功能，将打印预览页面的内容打印出来。

以上就是用Vue实现分页打印每页带表头的大致步骤。通过分页和渲染不同的数据数组，加上设置打印样式和条件判断，可以实现每页带表头的打印效果。

### 回答3：
Vue.js可以通过在模板中使用`v-for`指令和计算属性来实现分页打印，并且每一页都带有表头。

首先，需要定义一个计算属性来根据当前页数和每页显示的数量来计算要显示的数据列表。计算属性可以利用数组的`slice`方法来截取对应页数的数据，然后在模板中使用`v-for`指令循环渲染数据。

data() {
  return {
    pageNum: 1,  // 当前页数
    pageSize: 10,  // 每页显示的数量
    tableData: [/* 数据列表 */],
    tableHeader: [/* 表头数据 */],
  }
},
computed: {
  paginatedData() {
    const start = (this.pageNum - 1) * this.pageSize;
    const end = this.pageNum * this.pageSize;
    return this.tableData.slice(start, end);
  }
}

然后，在模板中使用`paginatedData`计算属性来渲染每一页的数据列表，同时在表格的头部也渲染表头数据。

<table>
  <thead>
    <tr>
      <th v-for="header in tableHeader" :key="header">{{ header }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in paginatedData" :key="item.id">
      <td>{{ item.field1 }}</td>
      <td>{{ item.field2 }}</td>
      <!-- 其他表格列 -->
    </tr>
  </tbody>
</table>

此时，在页面中显示的表格将会按照当前页数和每页显示的数量进行分页，并且每一页都带有表头。

当用户切换页数时，Vue.js会自动触发计算属性的重新计算，从而更新显示的数据列表。可以通过给页码增加按钮来实现翻页功能，当用户点击按钮时，更新`pageNum`的值，从而触发计算属性的重新计算。

<button @click="pageNum -= 1" :disabled="pageNum === 1">上一页</button>
<button @click="pageNum += 1" :disabled="(pageNum * pageSize) >= tableData.length">下一页</button>

以上就是使用Vue.js实现分页打印并且每一页带有表头的方法。有了这个实现，可以根据实际需求来对分页功能进行修改和优化。