vue-print-nb 打印el-table带滚动条的表格

可以使用 `vue-print-nb` 插件来打印带滚动条的 `el-table` 表格，该插件支持打印当前页面或者新窗口打印。

首先，在项目中安装 `vue-print-nb` 插件：

npm install vue-print-nb --save

然后，在需要使用打印功能的组件中，引入插件：

import Print from 'vue-print-nb';
export default {
  name: 'MyComponent',
  directives: {Print},
  // ...
}

接下来，在模板中添加一个打印按钮，并绑定打印事件：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :max-height="300"
      ref="table">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button type="primary" v-print>打印</el-button>
  </div>
</template>

注意：在使用 `vue-print-nb` 插件时，需要给打印按钮添加 `v-print` 指令。

最后，在方法中定义打印事件：

methods: {
  printTable() {
    this.$print(this.$refs.table, 'html')
  }
}

注意：在打印事件中，需要使用 `$print` 方法来触发打印功能，参数一是需要打印的元素，参数二是打印类型，可以设置为 `html` 或者 `image`。

完整代码示例：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :max-height="300"
      ref="table">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button type="primary" v-print>打印</el-button>
  </div>
</template>

<script>
import Print from 'vue-print-nb';
export default {
  name: 'MyComponent',
  directives: {Print},
  data() {
    return {
      tableData: [
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '张小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '李小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-01', name: '赵小虎', address: '上海市普陀区金沙江路 1518 弄' }
      ]
    }
  },
  methods: {
    printTable() {
      this.$print(this.$refs.table, 'html')
    }
  }
}
</script>