【开发】【element-ui】 表格fixed属性和浏览器兼容问题

已于 2024-07-29 10:49:40 修改
阅读量19 收藏
点赞数
分类专栏： 前端 笔记 文章标签： elementui
于 2023-11-01 14:00:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42042863/article/details/134159812
版权

问题场景：表格的一行数据出现错位对不齐

问题分析：出现该类问题，一般是由element-ui的表格属性fixed于低版本的浏览器不兼容导致。
检查使用的浏览器版本 目前已知61版本出现该类问题，升级到103后无问题

解决方法：若确认浏览器版本较低，则有两个解决方向
① 升级使用的浏览器版本
②修改代码，删除掉对应表格的fixed

沧海一比特
关注
专栏目录
element-ui 嵌套表格表头宽度显示的浏览器兼容问题
Julie_Go的专栏
08-10 688
在windows电脑IE、chrome浏览器上宽度显示，受到下面属性影响，覆盖css属性table-layout即可 .el-table__header{ table-layout: fixed; } 参考：https://www.w3school.com.cn/cssref/pr_tab_table-layout.asp
使用element-ui table组件 fixed 布局错位
东扯葫芦西扯瓜——前端小菜鸟的博客
08-12 1178
使用element-ui table组件 fixed 布局错位问题原因解决 问题 使用element-ui table表格布局，头尾列fiexd时，在chrome，火狐，edg浏览器上布局正常，但是在国产浏览器,qq浏览器，UC浏览器，360浏览器上布局错乱。 原因 因为chrome正常，所以怀疑是国产浏览器的chrome内核版本问题，就查看了一下，qq浏览器是70，uc浏览器55，360是65，而edg浏览器和chrome浏览器内核版本均是92。造成的直接原因其实已经找到了，就是国产浏览器chrome内
【Elemen-ui - el-table在safrai浏览器下表头和表体错位】
weixin_47416539的博客
07-27 122
【代码】【Elemen-ui - el-table在safrai浏览器下表头和表体错位】
自定义 element-ui 表格 滚动条 插件
weixin_43926239的博客
03-12 8385
自定义 element-ui 表格 滚动条 插件 elemtent-ui 是基于 vue2.0 开发的优秀的 前端 UI 组件库，它秉着 简洁，快速，效率的原则，大大的方便了网站开发人员，减少了开发人员大量的书写组件时间。 但是element-ui 中的部分组件，并不能满足所有的开发（产品 ）需求，比如 element-ui 中的 表格组件(el-table)，其表格组件功能很强大，但是当表格超出...
element-UI组件中safari兼容问题
马娟的博客
11-01 5745
1.safari浏览器input的placeholder不居中 input{ line-height:normal }
safari浏览器中element UI table表格错位的兼容，合计行错位的处理
Lucky_bo的专栏
12-17 2777
在使用固定table表头和合计行时出现了，表格错位的现象，具体解决方案： 设置一个公共的样式: .el-table__header,.el-table__body,.el-table__footer{ width: 100%; table-layout: fixed !important; } 因为表格是全局性的，这边最好设置一个全局的样式，合计的错位也相应的解决了。 table-layout知识点补充： 定义和用法 tableLayout 属性用来显示表格单元格、行、列的算法规则
element-ui 的表格里面使用 el-popover 实现编辑弹层功能
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
12-19 2939
功能点 1、表格是没有分页的 2、点击编辑能定位到对应的位置，进行编辑功能 3、表格滚动时候，编辑弹层需要关闭 效果 代码实现 <template> <el-table ref="multipleTable" > <el-table-column label="操作" width="90"> <template slot-scope="scope"> <el-button type="text" @click="handleClickEdi
解决前端ui界面使用element UI table表格不兼容safari浏览器，表格错乱的问题
qq_30405009的博客
06-05 9836
代码只是两行，我却用了将近两天的时间才解决，新人一枚呀！哭哭！！ 想办法去控制住当前的table表格，而不是一味的使用element UI原来的ui去控制 控制表格的body .el-table__body { // 使表格兼容safari，不错位 width: 100%; table-layout: fixed !important; } table-layout知...
element表格在Safari浏览器下面对不齐？
qq_38210427的博客
07-30 220
element UI框架el-table表格不兼容safari浏览器，因此表头thead和表体tbody存在错位问题。tableLayout 属性用来显示表格单元格、行、列的算法规则。
Element-UI+Vue模式使用总结
10-15
6. **jQuery的集成**：虽然Element-UI和Vue可以独立完成大部分前端任务，但在某些场景下，可能还需要与jQuery结合使用，例如处理一些低级别的DOM操作或者兼容旧版浏览器的功能。在项目框架中提到了jQuery的使用，但...
基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件
08-10
- **API设计**：新组件的API应该易于理解和使用，同时保持与原Element-UI组件的兼容性，方便开发者切换和升级。 - **性能优化**：由于涉及实时计算和调整列宽，可能会影响渲染性能。需要避免不必要的计算，如使用...
左侧是表头的表格
06-03
总的来说，这个“左侧是表头的表格”是一个具备高级特性的前端表格组件，适用于需要清晰呈现复杂数据的场景，且考虑到了跨浏览器的兼容性问题。其背后的技术栈涉及到HTML、CSS和JavaScript，特别是JavaScript的DOM...
ElementUI大坑Notification修改样式
前端小菜鸟也有人起的博客
09-13 272
ElementUI大坑Notification修改样式
Vue2时间轴组件（TimeLine/分页、自动顺序播放、暂停、换肤功能、时间选择，鼠标快速滑动）
挣钱花388的博客
09-13 177
项目背景是 一天的时间轴 10分钟为一间隔 一天被划分成144个节点 一页面12个节点light天亮模式dark黑夜模式。
element-plus组件问题汇总
xiaoxian_xian的博客
09-12 426
element-plus组件问题汇总
分享Vue3.5最新变化
最新发布
qq_34451215的博客
09-14 846
分享Vue3.5最新变化
vue3补充
WJLSH123的博客
09-12 392
【代码】vue3补充。
Element-UI表格高级用法：自定义列内容与操作
"Element-UI中的table表格组件是前端开发中常见的数据展示工具，尤其在后台管理系统中。本文总结了Element-UI表格的一些高级用法和技巧，包括自定义列内容、利用插槽进行功能扩展等。作者分享了在实际项目中遇到的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值