vue

#vue| 来源: 网络整理| 查看: 265

表格的列缺失（element-ui table组件）原因：

table-layout: fixed导致的，出现部分列没有被打印让表table布局更加符合预期，普通使用table时，其table-layout 默认值是 auto，导致表格第二行和第一行不一样宽，也就是两行的宽度不对齐。而使用： table { table-layout: fixed; } 则会让表的布局以第一行为准，设置表格的宽度，然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题，第二行以后是数据行，也就是让数据行的每列宽度向第一行列宽度看齐。这种样式的表格布局在性能上也快得多，这是因为整个表格的内容不需要花费进行分析，以便知道列的宽度。

解决方法 /deep/ table{table-layout: auto !important;} /deep/ .el-table__header-wrapper .el-table__header{width: 100% !important;} /deep/ .el-table__body-wrapper .el-table__body{width: 100% !important;}

注意点：

/deep/ table{table-layout: auto !important;}

可能会造成样式错乱，比如你页面有table，打印弹出层的table，这样修改样式有可能会导致页面表格行错位，解决办法：在页面的标签上加id,比如pagetable，修改less样式如下

/deep/ table{table-layout: auto !important;}/deep/ .el-table__header-wrapper .el-table__header{width: 100% !important;}/deep/ .el-table__body-wrapper .el-table__body{width: 100% !important;}/deep/ #pagetable table{table-layout: fixed !important;} 打印内容缺失（print.js/print-js独有，固定高度导致）原因：

一般为了好看，会固定高度，然后超出内容出现滚动条，但是打印的时候，只会打印固定高度的内容，导致打印内容缺失

解决方法 @media print {#box{height: 100%;}}

或者这样：找到print.js的getStyle方法，加入一行代码

str += "html,body,div{height: auto !important;}"; getStyle: function () {var str = "",styles = document.querySelectorAll('style,link');for (var i = 0; i @page{size: auto;margin: 3mm;}.footer {page-break-after: always;} }

【本文地址】

公司简介

联系我们