### 回答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: &#
39;link&#
39;, content: &#
39;print
.css&#
39;, media: &#
39;print&#
39;});
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="table
Data" 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 print
JS from &#
39;print-
js&#
39;;
export default {
methods: {
printTable() {
const tableElement = this
.$refs
.table
.$el; // 获取
表格DOM元素
print
JS(tableElement
.innerHTML); // 打印
表格
}
}
}
</script>
```
使用上述方法之一，你就可以在打印时
显示表格的边框线了。
表格数据转型：从对象到数组的巧妙解决
本文探讨了如何将后台传来的非数组对象数据转换为表格组件所需的数组格式，以便在前端正确显示。重点在于数据适配和数组操作技巧。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
