### 回答1：
如果
Vue 项目使用了
Element
UI 组件库中的 Table 组件打印表格时不显示表格
边框线，可以通过在 CSS 中覆盖样式来解决。
可以在项目中新建一个 CSS 文件，如 `print.css`，在该文件中
添加如下样式：
```
/* 表格
边框 */
table {
border-collapse: collapse;
border: 1px solid black;
}
/* 表格内容
边框 */
td, th {
border: 1px solid black;
}
```
然后在你打印表格的页面的 head 标签内加入
```
<link rel="stylesheet" type="text/css" href="print.css" media="print">
```
如果你使用
vue-cli那么也可以在
vue.config.js的配置里面加入
```
chainWebpack: config => {
config.plugin("html").tap(args => {
args[0].meta.push({name: 'link', content: 'print.css', media: 'print'});
return args;
});
}
```
这样打印出来的表格就会显示出
边框了。
### 回答2：
在
Vue和
ElementUI中，如果打印表格时不显示表格
边框线，可以通过以下几种方法解决：
1. 使用CSS样式控制：可以在打印时为表格设置特定的样式，如下所示：
```css
<style>
@media print {
.el-table {
border-collapse: collapse;
border: 1px solid #000;
}
.el-table th,
.el-table td {
border: 1px solid #000;
}
}
</style>
```
该样式将在打印时将表格的
边框线设置为1像素宽的黑色线条。
将上述代码放在需要打印表格的页面的样式部分，这样在打印时就会显示表格的
边框线。
2. 使用
ElementUI自带的打印样式：
ElementUI提供了一个打印样式，可以直接使用它来显示表格
边框线。只需在打印时
添加一个`el-table-print`的class，如下所示：
```html
<el-table class="el-table-print" :data="tableData" style="width: 100%">
<!-- 表格内容 -->
</el-table>
```
这样在打印时，表格就会显示
边框线。
需要注意的是，使用此方法时，不需要手动设置
边框样式，
ElementUI会自动应用默认的
边框样式。
3. 通过打印设置调整：在打印预览页面中，大部分浏览器都提供了打印设置选项，可以在其中选择打印
边框。具体操作可以参考浏览器的打印设置说明。
以上就是解决
Vue和
ElementUI中打印表格不显示
边框线的几种方法，可以根据实际需求选择其中一种方式来解决该问题。
### 回答3：
在
vue elementUI中，打印表格不显示表格
边框线的问题，可以通过以下两种方法来解决：
1. 使用自定义样式：可以在打印样式中
添加自定义的CSS样式来显示表格的
边框线。在打印时，可以通过媒体查询@media print来应用该样式。例如：
```css
@media print {
.el-table__body::-webkit-scrollbar {
display: none; /* 隐藏滚动条 */
}
/* 显示表格
边框线 */
.el-table__body, .el-table__header-wrapper, .el-table__fixed-header-wrapper {
border: 1px solid #000;
}
.el-table__row {
border-bottom: 1px solid #000;
}
.el-table__row--hover {
background-color: #f5f5f5; /* 鼠标悬停行背景色 */
}
.el-table__header {
border-bottom: 1px solid #000;
}
}
```
2. 使用打印插件：可以使用一些专门用于打印的插件来解决该问题，例如`print-js`插件。该插件可以在打印时保持元素的样式，包括表格的
边框线。首先，在项目中安装`print-js`插件：
```bash
npm install print-js --save
```
然后，在需要打印的组件中引入`print-js`插件，并在打印按钮的点击事件中调用相应的方法：
```html
<template>
<div>
<el-button @click="printTable">打印表格</el-button>
<el-table ref="table">
<!-- table content -->
</el-table>
</div>
</template>
<script>
import printJS from 'print-js';
export default {
methods: {
printTable() {
const table
Element = this.$refs.table.$el; // 获取表格DOM元素
printJS(table
Element.innerHTML); // 打印表格
}
}
}
</script>
```
使用上述方法之一，你就可以在打印时显示表格的
边框线了。
扫一扫
1054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
