记录自己遇到的element ui table表格边框错位问题

最新推荐文章于 2024-10-09 15:30:54 发布
最新推荐文章于 2024-10-09 15:30:54 发布
阅读量9k 收藏
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuqiuyao/article/details/84069754
版权

 

element ui table组件border属性添加边框

但是遇到添加border后无效情况

于是自己在表格外部嵌套自定义标签，更改table样式，发现边框有了，但是头部出现错位情况

 

添加属性display: table-cell!important; 解决。

秋秋秋ii
关注
Vue3使用element-ui的table表格错位
weixin_43871703的博客
03-09 1164
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 =
element-ui 之 表头错位
Filex的博客
08-19 734
element-ui 表头错位element-ui 表头错位错位样子（图）解决方式错位原因已知问题 element-ui 表头错位 错位样子（图） 解决方式 .el-table th.gutter { display: table-cell !important; } body .el-table--scrollable-y { .is-hidden.tableThStyle + .gutter { width: 13px !important; } } 错位原因 浏览器调试模式下
关于Element-ui中el-table出现的表格错位问题的解决方案 // 问题介绍：表格数据整个都是后端返回的（表头 + 数据）页面(aPage.vue)里是一个完整的组件＜newPag
博客简介
01-23 1397
关于Element-ui中el-table出现的表格错位问题的解决方案 // 问题介绍：表格数据整个都是后端返回的（表头 + 数据）页面(aPage.vue)里是一个完整的组件 组件中有一个el-table（有v-if控制显示隐藏），初步判断是因为表头数据过长 + v-if会导致这个问题概率性出现（刷新就好了，偶尔刷新又有了）
element ui table表格边框错位问题
weixin_44090040的博客
03-05 636
body .el-table th.gutter{ display: table-cell!important; }
el-table fixed固定列导致错位的解决方案
最新发布
weixin_44175192的博客
10-09 718
但是我的项目是动态表头的，没办法确定fixed列的相邻列。因此我用了一种取巧的方案，就是用doLayout方案，可以解决横向滚动的不对齐的问题，但是还有个问题就是如果列比较少（每个列都有宽度），表格不撑满整个页面。Element UI table组件可以通过设置fixed属性实现列的固定，但是在某些情况下会导致固定列的样式错乱，下面就总结下解决样式错乱实现方案。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。这个是网上一个大神经过一系列排查和非人类的试探后，总结出来。
解决elementui表格边框错位问题
shaozhuangGui的博客
07-15 1165
当elementui中的表格出现滚动条，拖拽的时候出现边框样式错位了怎么办，别急，让我来告诉你 今天下午开开心心的写代码的时候突然发现我在饿了么中使用的表格组件，当我把滚动条拖到最右边的时候，竟然出现了样式错位，这可把我难到了，赶紧去百度，但是百度上常用的解决办法就是在全局文件中写一段样式，如下： body .el-table th.gutter{ display: table-cell!important; } body .el-table colgroup.gutter{
前端基础学习-tab嵌套表格错乱问题
小夭的博客
01-15 611
最近开发有遇到过一个问题，当我们把多个table页面作为嵌套到el-tabs下时，切换tab会有错乱问题（这里的现象是切换的一瞬间，所以列缩小到最小，页面出现大量空白）。 这里记录一下解决方法。 在table中绑定ref <el-table border :data="tableData" ref="table" > </el-table> 在对应mounted或者created中添加nextTick() this.$
el-table出现表格border错位的解决方法
MtangEr的博客
12-19 1225
el-table出现表格border错位的解决方法
element-ui表格合并span-method的实现方法
10-16
在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...
element ui tabler表格宽度
07-27
回答: Element UI的表格宽度问题可能有几个原因导致。首先，如果固定列的高度小于表格的高度，可能会导致最后一行被遮挡。可以通过设置全局样式来解决这个问题，例如设置固定列的高度为100%。\[1\]另外，如果表头与...
element tab 导入html,element-ui中，使用el-tabs嵌套el-table，初次加载tab页时table表头和表格数据错位...
weixin_34669890的博客
07-02 1977
\#\#\# 问题描述element-ui中，使用el-tabs嵌套el-table，每个tab页下放置引入的子组件。并有v-if控制它的显示。子组件中的el-table中设置了列的宽度。问题出在初次加载tab页时table表头和表格数据错位。点击其他tab页再切换回去的时候错位消失了。下图是初次点击左侧菜单进来时的状态点击其他tab页比如已审批以后，再切回原来的第一个tab后\#\#\# 相关代...
element-ui table表格border显示问题
热门推荐
weixin_43691806的博客
03-22 4万+
这是部分参数，其余可参考element-ui官方文档 2产品要求 3只复制官方文档代码 <el-table :data="dataList" align="center" stripe> <el-table-column align="center" prop="duty"> </el-table-column> ...
element-UI使用其table组件时遇到的bug
xiong94的博客
03-05 1796
项目中需要使用到element-UI的table组件去展示一些数据，在使用插件的时候，出现了两个bug，两个都是样式bug 出现的场景是：将table组件进行单独封装，在其他组件中引入 bug1 style中使用了scoped，导致一些样式无法生效 对于scoped本人不是很熟，这个bug产生的原因目前不详 以后出现这个bug，可以作为参考 如果有大牛了解，还望不吝赐教 bug2 使用elemen...
Element Table resizable失效可能的原因
weixin_45773527的博客
02-06 1826
Element Table resizable失效可能的原因
ELEMENTUI 之EL-TABLE 的一点小总结[表头内容错位[自定义BORDER问题][自定义列宽度]
qq_44242030的博客
05-25 1354
标签： vue HTML5 JavaScript html css 前端在开发PC 端项目时，现在用的比较多的就是Element UI,而在PC端管理系统中，Table 可以说是必不可少，刚开始使用对table没有做过多的处理，可是在需要做一些处理时，对其文档不熟悉使用不熟练总出现一些意想不到的问题。 表头和内容错位： 解决在全局中添加 样式可解决： .el-table th.gutter { display: table-cell !important; } 自定义table 边框及单元格边框
element中表格中的表头与表格内容边框错位的解决方法
weixin_43734732的博客
12-21 4684
在APP.vue中的style标签内加上 body .el-table th.gutter{ display: table-cell!important; }
element-ui中表格el-table表头与内容右边框错位问题
weixin_40618068的博客
01-07 3507
在用element-ui实战写一个后台管理系统时遇到一个坑，就是el-table标签渲染出数据后表头和内容会有错位，如图： 具体原因不太清楚，估摸着是浏览器的问题，同是webkit内核的360浏览器没有出现这种情况，如图所示： 那么怎么解决问题，只需要在您的全局样式中添加如下css样式即可 body .el-table th.gutter{ display: table-cell!im...
elementUI table表头错位问题
only_neo的博客
07-04 2万+
解决方法：body .el-table th.gutter{ display: table-cell!important; }目前缩放也不会再出问题了。
element-ui 解决el-table表格错位问题
前进者
11-26 1万+
1、导致原因 表头动态，然后使用el-table的:height实现表格高度自适应，在页面动态新增列后出现错位问题； 2、现象如下; 3、解决方案： doLayout方法可以对table进行重新布局 elementUI相关文档地址： https://element.eleme.cn/#/zh-CN/component/table#table-methods doLayout 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 this
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值