### 回答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="print
Table">打印
表格</el-button>
<el-
table ref="
table">
<!--
table content -->
</el-
table>
</div>
</template>
<script>
import printJS from 'print-js';
export default {
methods: {
print
Table() {
const
tableElement = this.$refs.
table.$el; // 获取
表格DOM元素
printJS(
tableElement.innerHTML); // 打印
表格
}
}
}
</script>
```
使用上述方法之一，你就可以在打印时
显示表格的
边框线了。
9489
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
