vue-print-nb 打印el-dialog下 el-table height="100" 带滚动条的表格

要在 Vue 中使用 `vue-print-nb` 插件打印带滚动条的 `el-table` 表格，且该表格位于 `el-dialog` 对话框中，可以按照以下步骤进行操作：

1. 安装 `vue-print-nb` 插件

npm install vue-print-nb --save

2. 在需要使用的组件中引入 `vue-print-nb` 插件

import Print from 'vue-print-nb'

3. 给 `el-table` 组件添加 `ref` 属性，方便后面操作

<el-dialog ref="dialog" :visible.sync="dialogVisible" title="打印表格" :close-on-click-modal="false">
  <el-table ref="table" :data="tableData" height="100" style="width: 100%; overflow: auto;">
    <!-- ... -->
  </el-table>
</el-dialog>

4. 在需要打印的按钮或者其他触发事件中，调用 `vue-print-nb` 插件的 `print` 方法

<el-button @click="printTable">打印表格</el-button>

// ...
methods: {
  printTable() {
    let dialog = this.$refs.dialog.$el.querySelector('.el-dialog__body')
    this.$print(this.$refs.table.$el, {
      importCSS: true,
      importStyle: true,
      printContainer: true,
      header: null,
      footer: null,
      // 将 dialog 元素传入，以解决打印预览中表格滚动条无法显示的问题
      target: dialog
    })
  }
}

其中，`this.$print` 方法会将 `el-table` 对应的 DOM 元素传入 `vue-print-nb` 插件中进行打印。需要注意的是，由于 `el-table` 组件位于 `el-dialog` 中，而 `el-dialog` 本身也是一个组件，使用 `this.$refs.table.$el` 可能无法正确获取到表格元素，因此需要通过 `this.$refs.dialog.$el.querySelector('.el-dialog__body')` 获取到对话框中的内容区域，再将其传入 `target` 参数中。另外，由于 `el-table` 组件本身带有滚动条，所以在打印时需要将样式中的 `overflow: auto` 改为 `overflow: visible`，否则在打印预览中可能无法显示完整的表格内容。