vue-print-nb 打印el-table height="100" 带滚动条的表格
时间: 2024-03-23 22:42:37 浏览: 119
表格加滚动条
要在 Vue 中使用 `vue-print-nb` 插件打印带滚动条的 `el-table` 表格,可以按照以下步骤进行操作:
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-table ref="table" :data="tableData" height="100" style="width: 100%; overflow: auto;">
<!-- ... -->
</el-table>
```
4. 在需要打印的按钮或者其他触发事件中,调用 `vue-print-nb` 插件的 `print` 方法
```
<el-button @click="printTable">打印表格</el-button>
// ...
methods: {
printTable() {
this.$print(this.$refs.table.$el)
}
}
```
其中,`this.$print` 方法会将 `el-table` 对应的 DOM 元素传入 `vue-print-nb` 插件中进行打印。需要注意的是,由于 `el-table` 组件本身带有滚动条,所以在打印时需要将样式中的 `overflow: auto` 改为 `overflow: visible`,否则在打印预览中可能无法显示完整的表格内容。
阅读全文