Vue2打印表格错位

已于 2023-05-29 17:31:03 修改
阅读量570 收藏
点赞数
分类专栏： Vue2 文章标签： vue.js 前端 css
于 2023-05-29 16:01:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37494968/article/details/130930183
版权
在使用Vue2结合vue-print-nb组件进行表格打印时，遇到多级表头显示错位的难题。通过添加/deep/选择器并重置.el-table-th.gutter的display属性为table-cell，可以有效解决打印时的错位现象，确保表格布局在打印过程中保持正确。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、问题描述

Vue2使用vue-print-nb打印表格出现错位问题（表格使用多级表头）
打印表格错位

二、解决办法

/deep/ .el-table th.gutter {
    display: table-cell !important;
}

正确表格

三、参考

解决 vue-element-admin 标签页切换时，table表格规定列错位问题
DevZYD的博客
07-12 1417
一、问题现象： 首次加载固定列正常 切换标签页到另外一个再切换回来，问题出现 二、问题出现的原因分析： 标签页路由设置为了缓存，meta.noChace = false, 在切换标签页时，路由为懒惰加载形式，导致页面组件被缓存，因高度为动态计算获取，从而出现固定列错位 三、解决方法： 在需要表格重载的vue文件加上vue生命周期函数 activated 执行表格重载即可 activated () { this.$nextTick(() => { this
Vue3使用element-ui的table表格错位
weixin_43871703的博客
03-09 1277
vue3使用element Plus 的table表格在搜索错位 <el-table ref="tableRef"></el-table> JS部分 const tableRef = ref(null);// 这里是在<el-table>上定义的ref，vue3需要用ref变成响应式数据 //打印里面的结构可以用 console.log(tableRef.value),一直往下找会有doLayout方法; //重新渲染的函数 const reRender =
解决el-table表格打印错位，el-table打印时表格行错位问题，el-table数据过多打印行错位问题。
海贼王某人的博客
09-19 1930
解决el-table表格打印错位，el-table打印时表格行错位问题，el-table数据过多打印行错位问题。,记录el-table打印时的一个小BUG，行错位的问题，先看看bug图，再看看解决后的效果图，最后奉上代码。
在vue2项目中el-table表格的表头和内容错位问题
最新发布
m0_62508027的博客
03-06 589
解决el-table因横向滚动条滑到最右边时，表头和内容错位问题
vue解决el-table表格中表头与内容错位问题
qq_59224836的博客
07-07 4577
解决当el-table里的内容比较多的时候以及el-table表格列固定左右滑动导致的表头与内容错位问题，直接在请求数据后执行表格自带属性doLayout方法重新加载table即可完美解决。
vue-print-nb element 打印element表格不全以及自定义的样式出不来问题（亲测解决）
weixin_44056717的博客
04-12 5230
vue-print-nb element 打印element表格不全（亲测解决）
vue element 表格错位
初壹什伍
07-10 533
vue element 表格发生错位对不齐的问题 在做vue element 表格的时候，页面展示上发现列表对不齐，在网上搜索了很多解决方法，发现一个好用的解决方法： <style scoped> /deep/ .el-table th.gutter{ /* * 解决element-ui 表格篡位的问题 ???? */ display: table-cell!important; } </style> 将这段代码放在入口文件App.vue 中，成功解决了问题，但是原
el-table打印PDF预览，表头错位的解决方案
yan1915766026的博客
12-17 2428
el-table打印预览PDF，表头错位边框线不显示等问题的解决方案
VUE Table复杂表格生成带格式的excel（多表头、合并单元格、边框、居中、背景）
rxy1176073894的博客
04-28 4433
VUE Table复杂表格生成带格式的excel（多表头、合并单元格、边框、居中、背景） 因为工作需要，在网上找了很多都不太行无意之间看到一个大佬的打码拿过来改了改居然可以用！ 原文链接：https://blog.cqhpoldi.com/?p=650 首先看一下我的表格是啥样子（普通表格也可以用） 我在网上找了很多方法要么是错位，要么是没边框、没格式，无意之间看到一个大佬写的代码试了一下大致上可以然后自己改改居然成了。 1.下载 npm install file-saver --save
ant-design React table表格组件合并展开错位解决
weixin_45609894的博客
08-25 1769
2. 修改Oncell方法，根据上面计算的sortRowSpan的值，多个相同的sort设置rowSpan等于它的个数，不需要合并的sort，rowSpan设置为0。4. 这时候问题基本解决了，展开和合并，第一列的合并没问题，但是最后一列又出现了错位，因为expandable展开的td的colspan默认和columns长度一致。我这种写法rowSpan是固定的，前面第一列的合并个数是固定的，而antd的展开是相当于增加了一整行，然后页面合并就会错位。我太菜，搞不定了，求助大佬。
Vue-Plugin-Hiprint 使用指南：构建专业级打印功能的全流程解析
qq_50708187的博客
01-31 1310
/ 动态模板配置示例panels: [index: 0,options: {left: 20,top: 20,title: '量子打印标题',},},options: {left: 20,top: 60,columns: [{ field: 'name', title: '名称', width: 100 }},// 注册条形码组件})})// 模板配置options: {width: 2,height: 40。
vue2项目中引入Element UI 后 el-table的表头和表头样式错位解决办法
weixin_45832746的博客
02-22 347
这样可以让序号随着翻页而改变。
vue + element el-table表格出现错位
code_carrierV1的博客
04-09 2004
vue + element el-table表格出现错位 应用问题场景是用v-if 来控制Table某列 显示和隐藏, el-table中渲染出现最下面一列会渲染不全，以及有时候会出现行错位问题 通过el-table的doLayout()解决了， 关于doLayout()官方文档如下描述 在触发加载表时添加 this.$nextTick(() => { this.$refs.formGoodsTable.doLayout() }) 最后完美解决 ...
使用vue-print-nb打印element table时表格打印不全的问题
liangyiyiliang的专栏
04-27 1万+
elment的表格设置宽度为100%之后打印还是不能将表格打印完整 如下图 1.寻找问题 为什么会出现这种情况，打开控制台查看代码 原来是el-table 会计算100%宽度为具体多少px 然后再计算出每一列的宽度 通过设置table>colgroup>col 的width属性来设置每一列的宽度。问题是浏览器的打印区域的100%的具体px如这里的1388px肯定与打印纸的宽度不一致 所以导致部分区域打印不出来 2.解决思路 那就把col这里的具体宽度设置成百分比就OK了...
vue中elementui表格错位问题
weixin_53417669的博客
09-14 349
vue中elementui表格错位问题
vue-print-nb打印问题总结
热门推荐
q1424966670的博客
08-18 2万+
1、如果打印出来，表格的列缺失 原因：table-layout: fixed导致的 让表table布局更加符合预期，普通使用table时，其table-layout默认值是auto，导致表格第二行和第一行不一样宽，也就是两行的宽度不对齐。而使用： table { table-layout: fixed; } 则会让表的布局以第一行为准，设置表格的宽度，然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题，第二行以后是数据行，也就是让数据行的每列宽度向第一行列宽度看齐。...
vue-print-nb ,element-ui =＞ table打印不全不说原理直接上代码
weixin_48802343的博客
12-12 1487
* 表格内容边框 *//* 表格边框 */
vue-print-nb使用和解决打印element表格不全问题
qq_41329287的博客
03-13 5178
【代码】vue-print-nb使用和解决打印element表格不全问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值