element-ui el-table组件的 el-table-column 加了fixed属性列固定后样式高度错乱问题

最新推荐文章于 2024-06-14 10:28:00 发布
最新推荐文章于 2024-06-14 10:28:00 发布
阅读量4k 收藏 2
点赞数 2
分类专栏： vue前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41836069/article/details/114632904
版权

element-ui el-table组件的 el-table-column 加了fixed属性列固定后样式高度错乱问题

操作列设置了属性：固定fixed后发现每页最后一个button显示不全，查看源码后发现最后一列是class=“el-table__fixed-right”，并且高度不够

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
这个高度是动态计算的，
所以要加一个样式去覆盖这个计算的高度解决这个问题
在这里插入图片描述
在这里插入图片描述
问题解决！

liangzg89
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
Element-UI是一款基于Vue.js的开源UI组件库，它提供了丰富的界面组件，如表格（el-table）、按钮、提示、下拉菜单等，极大地简化了Web前端开发过程。然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置...
el-table fixed固定列导致错位的解决方案
热门推荐
青年码农
07-27 1万+
点击上方“青年码农”关注回复“特效源码”可获取各种资料Element UI table组件可以通过设置fixed属性实现列的固定，但是在某些情况下会导致固定列的样式错乱，下面就总结下解决样式错乱实现方案1.doLayout（官方提供）对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。2.<el-table>标签上...
element el-table组件的 el-table-column加了fixed属性列固定后样式高度错乱问题
禅思院
09-07 1万+
问题1 element-ui el-table组件的 el-table-column 加了fixed属性列固定后样式高度错乱 原因 el-table-column 列加了fixed="right"操作后，从源码上来看，加入fixed之后这个列的高度是动态计算的，页面加了缓存，再次切换回来就会导致高度没有计算padding值所有会出现高度错乱的问题。 方案 覆盖el-table__fixed-right 的css 样式 .主class .el-table__fixed-right { heigh
element-ui table表格 使用fixed导致表格错位，怎么解决？
最新发布
qq_70036866的博客
06-14 196
2. 用css样式设置表格 .el-table_fixed{height: 100%!important;3.检查代码，表格初始化的时候，data数组不能为空。解决方法：1.调整表格高度。
elementUI-table-el-table-column使用fixed，样式错乱。
黄小堆
04-21 6964
1、vue-router.esm.js?fe87:1897 Error: Loading chunk 32 failed. at HTMLScriptElement.onScriptComplete (app.js:758) 问题：有时候久没有进入网页的时候，刷新就报这个错误，页面空白。然后多刷新几遍才回到登录界面。 我还没有找到解决的办法，也很笨，不知道怎么排查。 问题解决参考文章...
el-table组件fixed引起的表格布局错乱问题
千里之行，始于足下！
12-17 4073
背景：最近做项目时使用el-table组件，在使用fixed布局并设置height的表格遇到以下的问题： 1、发现横向滚动条很难拉动 2、进行固定列时出现了布局错乱，错乱效果如下图（参保人基础信息 列使用了fixed进行固定）： 解决： /*解决fixed引起的错位问题*/ .el-table{ overflow: auto; } /*解决横向滚动条拉不动问题*/ .el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-w
VUE-006-el-table拖拽表头页面显示异常（二）
weixin_39568072的博客
12-21 759
el-table拖拽表格宽度导致页面异常 <el-table-column fixed="right"> 情景2： 问题列fixed="right" 此时拖拽最后一列宽度，导致页面异常，如下： 解决办法1： 最后一列 el-table-column不要设置width，如下： 解决办法2： 倒数第二列加属性 :resizable="false"，如下： 这样设置后，最后一列尺寸就不可以被改变了。 ...
VUE + Element UI el-table fixed固定列高度问题
LEON_RAY
12-08 5544
<el-table class="table-fixed"></el-table> .table-fixed{ /deep/ .el-table__fixed-right { height: 100% !important; //设置高优先，以覆盖内联样式 } /deep/ .el-table__fixed { height: 100% !important; //设置高优先，以覆盖内联样式 } } 原文：element-ui ta...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
el-data-table:element基于element-ui，轻松实现结界
05-13
创建el-data-table来解决业务问题，因此在其中设置了CRUD逻辑。 例如，要开发user api，请假设其相对路径如下： / api / v1 / users 宁静的CRUD API应该是： 取回 GET / api / v1 / users ? page = 1 & size = 10...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
Element-UI提供了一套丰富的UI组件库，其中包括表格（Table）和表单（Form），它们可以帮助我们构建出美观且功能强大的界面。然而，在实际应用中，尤其是在表格中嵌入表单元素并进行数据验证时，会遇到一些挑战。...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
Element UI el-table当拖动表格列时单元格样式错乱
qq_39835287的博客
09-19 691
Element UI el-table当拖动表格列时单元格样式错乱
自定义指令解决elementUI中table组件的column设置fixed属性后，滚动时表格无法对齐的问题
beretHat_5的博客
03-25 2074
问题： el-table组件中，column在设置了fixed属性的情况下下，垂直滚动会出现表格错位的问题。分析： column在设置了fixed=“left”或fixed=“right”后，在table的对应位置增加了对应个数的column，它们都被设置为position: fixed。下面的table只是被固定的column遮盖，当垂直方向有滚动事件时，两侧固定column会动态计算滚动高度。但是实际使用中计算的时候会受头部样式或padding的影响而计算出错，导致出现表格错位的问题。
element中table设置多级表头并固定制定列，解决固定列不显示内容
m0_52263688的博客
04-23 3819
需注意给多级表头和需要固定的列每一列都加上fixed属性，并且子表头列的宽度设置总和需要大于等于父级表头，既可以解决。
el-table 添加fixed属性以后，设置好的样式，不生效的问题。
weixin_46531845的博客
03-23 3623
3月23日 周三 1.el-table 添加fixed属性以后，设置好的样式，不生效的问题。 table表头，样式错位 相关css代码，之前 el-table__header-wrapper 。添加固定属性fixed以后， 就多了一个.el-table__fixed-header-wrapper 属性，所以对el-table__fixed-header-wrappe 重新填加样式即可。 .el-table__header-wrapper , .el-table__fixed-header-wrappe
Element-ui的table中使用fixed后出现行混乱情况
qq_35629054的博客
11-24 2930
最近项目比较忙，很久没有更新博客了，今天就来贴一下下午使用elementui遇到的问题 1、话不多说，先看看问题是什么 我们看到table左侧fixed的区域并没有延伸到表格底部，之前在用户拖拽表格时添加了方法this.$refs.headGroupTable.doLayout()来重置表格（headGroupTable是自定义组件名称，学过vue的都懂），但是在数据拿到后使用此方法并不能解决以上问题 2、解决方法 其实解决方法也很简单，我们打开浏览器看到fiexed的表格区域样式的高度是固定的px，这是
element中table布局（fixed）以及动态布局造成的列表错乱
beichen3997的博客
12-26 8937
table动态布局以及使用fixed定位造成的结果 解决办法重新计算table布局 this.$nextTick(()=>{ this.$refs.tab.doLayout() }) 解决后效果 ...
Element-UI 的 el-table 组件
06-09
Element-UI 的 el-table 组件是一个非常强大的表格组件，它提供了多种常见的表格功能，如排序、筛选、分页、自定义列模板等。 使用 el-table 组件需要先引入 Element-UI 库，并在需要使用的 Vue 组件中注册 el-table 组件。例如： ```js <template> <div> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </div> </template> <script> import { ElTable, ElTableColumn } from 'element-ui' export default { components: { ElTable, ElTableColumn, }, data() { return { tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, { name: '王五', age: 30, gender: '男' }, ], } }, } </script> ``` 在上面的例子中，我们使用 el-table 组件来展示一个包含姓名、年龄、性别三列的表格，并通过 tableData 属性传入了表格的数据。el-table-column 组件用来定义表头和数据列，其中 prop 属性指定了对应的数据属性名，label 属性指定了列名。 除了基本的表格展示功能，el-table 组件还支持很多高级功能，如分页、排序、筛选、自定义列模板等，详细使用方法可以查阅 Element-UI 官方文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值