elememtUI el-table打印出来行内容错行的问题

最新推荐文章于 2024-07-22 15:44:16 发布
最新推荐文章于 2024-07-22 15:44:16 发布
阅读量2.2k 收藏
点赞数
分类专栏： Vue.js框架开发 文章标签： el-table打印出来数据错行  el-table打印出来行内容错行 vue+element table数据错行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dream_xun/article/details/95613438
版权

一、问题描述

1.最近用vue+elementUI做了一个打印功能，打印的内容包含了elementUI 的table，table的数据发现打印出来行错乱了，就像下面图片上这样子

调试了好一会才发现是el-table中一个属性的问题，只要把这两个属性去了就好了

二、解决办法

如下图，把fixed属性去掉打印出来就不会错行了。

打印正常的图

 

 

 

Dream_xun
关注
专栏目录
VUE 在Element Table组件中实现打印
caoyan0829的博客
10-28 1563
1. // 多选框选中数据 handleSelectionChange(selection) { this.multipleSelection = selection; this.ids = selection.map((item) => item.postId); this.single = selection.length != 1; this.multiple = !selection.length; },
el-table 行合并示例
贵在坚持
11-27 2614
本文演示 el-table 的行合并，包括单个表格，循环表格的行合并示例
解决el-table表格打印错位，el-table打印时表格行错位问题，el-table数据过多打印行错位问题。
海贼王某人的博客
09-19 1699
解决el-table表格打印错位，el-table打印时表格行错位问题，el-table数据过多打印行错位问题。,记录el-table打印时的一个小BUG，行错位的问题，先看看bug图，再看看解决后的效果图，最后奉上代码。
当el-table组件使用fixed时，滚动发生错位
最新发布
JSONpage的博客
07-22 550
使用el-table的fixed表格错位
element-ui 表格错行
weixin_30947043的博客
08-14 835
//表格错行 .el-table th.gutter { display: table-cell !important } 转载于:https://www.cnblogs.com/Byme/p/11350944.html
Vue2打印表格错位
golden_kitty blog
05-29 450
Vue2使用vue-print-nb打印表格出现错位问题（表格使用多级表头）
Element-UI el-table组件表格打印
木缘的博客
04-20 1万+
需求 打印Element-UI el-table组件渲染的表格。 总体布局 整体采用居中布局，表格宽度设置为1000px。表格宽度应该根据打印的纸张大小设置，过大会导致表格打印时显示不全，过小则不能充分利用纸张空间。我用A4纸打印设置宽度1000px刚好。 1. 静态页面 <template> <div class="print-container"> <h1 style="text-align: center">员工信息表</h1> &l
el-table相同数据行单元格合并
problemRecord的博客
07-14 2808
el-table相同数据行单元格合并
el-table el-table-column 操作el-table的单行数据的内容 实现手机号码中间4位*显示，操作el-table的单行数据的内容显示与隐藏
hylshyshm的博客
01-13 1753
总结：实际上操作el-table的单行数据的内容主要通过showNumberFlag和showNumberFlagIndex 2个参数，和比较scope.$index(每一行的行数)和showNumberFlagIndex(记录操作的行数)的值来实现！
el-table给相关行添加背景色（tree数据结构）
qq_52136609的博客
12-19 1922
el-table给相关行添加背景色（tree数据结构）
通用导出el-table表格内容的方法
授人以渔的博客
08-30 1523
本方法可以根据id(表格ID)、title(导出表格标题)、delcol（移除列名称）等属性设置进行导出，会自动移除多选框以及相关button，只导出表格内容。
vue+element实现打印页面功能
10-16
主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue——printjs打印el-table,echarts等打印不全，异常解决
小欣儿的专栏
03-31 1万+
这条同样可以解决echarts不能打印问题，算是万能之法了吧，相对前面几种方式赶紧这个方法最简单，打印效果也比较理想。
vue使用printjs打印el-table
波塞冬的博客
10-19 2442
vue使用print-js打印（含el-table）样式问题
el-table动态合并表格出现错乱问题记录
m0_71266141的博客
03-21 769
【代码】el-table动态合并表格出现错乱问题记录。
element 解决el-table表格错位问题
热门推荐
weixin_45784283的博客
10-22 1万+
起因是表头动态，然后使用el-table的*:height*实现表格高度自适应，在页面动态新增列后出现错位问题； 找了很多解决办法都没有解决，最后发现其实官网有个doLayout方法可以对table进行重新布局 在寻找解决办法的过程中，发现博客中提到这个方法的很少，希望可以帮助大家。 this.$nextTick(() => { this.$refs.table.doLa...
vue-print-nb element 打印element表格不全以及自定义的样式出不来问题（亲测解决）
weixin_44056717的博客
04-12 4660
vue-print-nb element 打印element表格不全（亲测解决）
笔记：Element-ui的el-table 表格错位问题
sky8880的博客
12-01 353
vue elementUI
【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！
蓝胖子的博客
02-24 1万+
【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！
el-table自定义合计行内容换行
09-20
el-table自定义合计行内容换行可以使用CSS样式来实现。在.el-table__footer-wrapper样式中，给td.el-table__cell div添加white-space属性，并设置为wrap。这样就可以实现合计行内容的换行。 ::v-deep .el-table__...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值