el-table切换页面后gutter17px bug解决

最新推荐文章于 2024-08-19 15:59:45 发布
最新推荐文章于 2024-08-19 15:59:45 发布
阅读量1.7k 收藏
点赞数
文章标签： js vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45172409/article/details/121680911
版权

今天遇到一个很奇怪的bug,第二次进入页面(不重新调用接口)会有一个留白,
思考后我认为是设置的高度或者宽度再次进入重新计算了一遍,只不过父元素继承的值也发生了变化。
最后用了很多办法都是拆东墙补西墙,不够完美.
迫不得已采用删代码找问题的方式,最后定位在下面代码上

<el-table-column :label="$t('handle')" header-align="center" align="center" min-width="220">
 <template slot-scope="scope">

发现是min-width出了问题,个人猜测就是因为这个字段重新分配的时候计算导致的,改成width就好
前端采坑之路的尽头依旧遥遥无期

暮年。
关注
去掉el-table表头右侧类名是gutter，width=17px的空白区域（包括表头样式及表格奇偶行样式和表格自动滚动）
qq_53857666的博客
05-30 1045
去掉el-table表头右侧空白区域（包括表头样式及表格奇偶行样式和表格自动滚动）
Vue中el-table追加行后固定列滚动错位问题
qq_39753413的博客
07-12 2956
Vue中el-table追加行后固定列滚动错位问题 偶然发现一个问题，但是并没有找到解决方案，自己调试了两个多小时终于解决。先贴出问题业务描述：在已查询完全部的符合条件的数据后，表格最下方提示“没有更多数据” 使用solt = “append” 追加div 这时候滑动到最底部，固定列错位了。......
el-table右侧有一块空白，为进度条，影响观看
weixin_67849181的博客
03-09 680
给table设置了进度条，只有少量数据的时候很影响观感，感觉table没有盛满。
elment-ui中设置el-table时表头空出来了一列
最新发布
qq_58148320的博客
08-19 280
有滚动条时显示正常，打开开发者工具排错，无滚动条时多出一个class为gutter的列。原因是因为我将表格的每一列都设定了固定的宽度。其实这里是滚动条预留的列。②把操作列的宽度删除，表格将会依据长短的变化将剩余列填满。：①把class是el-table__body 的宽度设置成100%就可以了。
el-table组件自定义滚动条样式后出现空白列解决
weixin_52137539的博客
06-21 228
也设置为相同的宽度和高度就会解决上述问题。设置滚动条样式后出现空白列。
解决element ui 表格缩放后gutter: 17px导致表格错位问题
danke的博客
09-13 804
【代码】解决element ui 表格缩放后gutter: 17px导致表格错位问题。
el-table在有些电脑上显示问题（表头与表体不对齐gutter列导致得）
weixin_44817180的博客
08-05 5650
el-table在个别电脑上得表头与表体不对齐（是因为没有滚动条时表头得gutter列得width为17px引起得） 其中gutterHidden初始默认为false <el-table :class="{'gutter-th':gutterHidden}" :data="tableData" style="width:100%;" :default-sort = "{prop: 'startTime', order: 'ascending'}"
el-table隐藏滚动条和滚动条所占的gutter宽度
weixin_40745445的博客
06-20 1450
【代码】【无标题】
那些写Vue.js +Element +Axios 遇到的坑（1）
Lzw_Fight的博客
04-04 286
学会总结写项目中遇到的难点，才能写出更多好的项目 this的使用？ 在axios中，尽量使用一个函数变量that来代替this，而不是在axios中定义,即 var that = this 然后再对this的相关值进行赋值 否则会出现，数据对不上号，或者this.xxx is not a function的错误 <img/>标签可以代替<el-image>标签的情况...
Vue电商后台管理系统部分效果
weixin_53239939的博客
12-04 546
这个是一个电商管理系统的前端项目的笔记，这个项目主要包括登录/退出功能、主页布局、用户管理模块、权限管理模块、分类管理模块、参数管理模块、商品管理模块、 订单管理模块等功能，我把里面部分的功能进行了整理，希望对大家有所帮助！ 项目部分效果 管理系统功能 电商后台管理系统用于管理账号、商品分类、商品信息、订单、数据统计等业务功能 项目概述 前端技术栈 vue vue-router Element-UI Axios Echarts 项目部分效果 这是一个登陆页面主要实现了用户登陆表单验证（登陆功.
vue_shop后台管理系统—商品列表
Minnor的博客
07-19 3287
$router.push()实现了路由跳转，在添加商品组件中，用到了挺多新方法和新思路，实现了Tabs标签和对应的步骤条之间的数据联动；阻止标签页的替换；新组件Upload上传照片：每次上传图片时都需要为上传组件手动设置headers请求头，同时在请求头对象中，绑定Authorization字段，因为Upload上传组件没有调用axios；富文本编辑器组件 quill- editor；在添加动态参数和静态属性时出现了数组和字符串的矛盾，所以用到了lodash库中的_.cloneDeep()方法进行深拷贝..
Vue.js+flask+mongodb实战注意事项
热门推荐
查理曹的博客
01-19 1万+
由于最近业务到需要，我们TaaS平台需要实现一些需求，虽然号称前后分离但实际并不分离，而前端只是简单的学过一点，所以遇到了一些坑。在踩过这些坑的时候也想寻求google和百度的帮助，然而帮助实在很少，就索性写一篇博客，把这些坑都记录下来，为以后遇到同样问题的小伙伴提供参考，因为vue里面我们采用了eslint规范，所以都按照规范来书写代码。整篇代码的重点其实就是在v-if，slot-scope，v...
解决elenemtUi中使用el-tabs组件多个标签页切换el-table时，出现宽度压缩(缩小)的问题
qq_45404003的博客
07-28 3303
需要注意的是，doLayout() 方法只能在组件完全渲染后才能调用，否则可能会出现计算不准确的情况。解决方法就是使用el-table组件中的doLayout()方法是用来重新计算组件大小和位置的。当我们对组件进行动态修改后，可能会导致组件大小或者位置发生改变，此时可以调用 doLayout() 方法来重新计算并更新组件的布局。这样就会重新计算并更新表格的布局。
解决el-table表头与表格有细微宽度差距
coolsheep_的博客
02-03 912
全局设置 // 为了解决el-table首行缩放后和列宽度有微小的差别的问题 body .el-table th.gutter{ display: table-cell!important; } body .el-table colgroup.gutter{ display: table-cell!important; }
解决宽屏下el-table表头错位无法占满宽度100%的问题
随风丶逆风的博客
11-11 4559
问题 在宽屏情况下el-table出现表头错位且无法占满宽度100%的问题： 解决方案 在通用样式文件下，添加如下样式： .el-table th.gutter { display: table-cell !important; } .el-table colgroup.gutter { display: table-cell !important; } 原理 使用display: table-cell可以让标签元素以表格单元格的形式呈现，类似于td标签，此时元素对宽度高度敏感，对margin
el-table表头和表格列宽不一样
believet93的博客
08-09 3485
1、直接上图： 2、解决办法 2-1、网上找的办法 将以下样式代码添加到index.html、或app.vue中（必须是入口文件，起全局作用！） body .el-table th.gutter{ display: table-cell!important; } 2-2、自己新建css文件common.css，在文件中将上面样式写入 /* 解决element-ui的table...
element-ui table 表格头多出一列
baihua__shu的博客
04-14 7640
问题：el-table 组件 表头右侧多出一列空白 原因： 所有 el-table-column 都设了宽度，当内容超出高度滚动条出现，表头多出一列滚动条上方的占位 解决： 将 th.gutter 隐藏 th.gutter { display: initial; } /* vue 使用 scoped 需要 /deep/ 深度作用 */ div /deep/ th.gutter { display: initial; } 或将 th.gutter ...
el-table 16px gutter表格表头出现错位缺少一格
weixin_43120901的博客
07-09 3266
解决办法： /deep/ .el-table th.gutter { display: table-cell !important; background: #164773;//因为我改了我的默认表格背景颜色，所以要跟着改 } 此外，想咨询下，为什么会有这种情况？
【已解决】解决 el-table滚动条超出表头/表格
bao
07-08 2592
el-table滚动条放到表格内部.
el-table__cell gutter 拿掉
07-09
在Element UI的表格组件`el-table`中，`gutter`属性通常用于设置单元格之间的间距。如果你想取消这个间距，即去掉单元格间的空白区域，你可以通过设置`gutter`为`0`或者直接不给`gutter`属性来实现。例如，在HTML...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值