Element的el-table行列错位对不齐问题处理

简介: 本文目录1. 问题表现2. 问题发现3. 问题处理4. 另一种处理方案

1. 问题表现

使用ElementUI的el-table后,偶然发现出现行列错位、对不齐问题。

image.png

2. 问题发现

实际上为了让表格可以垂直滚动造成的,添加了如下代码,对原生样式造成了影响。


.el-table {

 overflow-y: auto !important;

}


3. 问题处理

直接在el-table外围添加一个div,然后固定div的高度让其垂直滚动即可。


当然如果还需要固定表头,可以参考:ElementUI表格el-table固定表头且高度占满


4. 另一种处理方案

有时候切换表格v-if显示时,也会导致行列错位,此时可以尝试将v-if换为v-show

相关文章
|
7月前
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
|
2月前
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
927 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
7月前
【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】
【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】
|
JavaScript BI
el-table 多表格弹窗嵌套数据显示异常错乱问题
## 1、业务背景 使用vue+element开发报表功能时,需要列表上某列的超链接按钮弹窗展示,在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗,以此类推多表格弹窗嵌套,本文以弹窗两次为例 最终效果如下示例页面 ![微信截图_20231110143638.png](https://ucc.alicdn.com/pic/developer-ecology/j2ygdazy447va_6eb0201441bc40a4b5bda9a7e573f0d2.png)
232 0
|
缓存 JavaScript 前端开发
el-table 列的动态显示与隐藏
当我们在对表格数据查看的时候,可能某些列的数据是当前想要重点关注的,而某些列并不需要展示出来,我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。
element中el-select下拉框位置错乱问题
element中el-select下拉框位置错乱问题
770 0
Element表格el-table固定表头且高度占满
本文目录 1. 固定表头 2. 占满高度 3. 使用vh占满高度 4. 动态调整高度
2339 0
layui不同 li 不同数据表格,当前数据表格刷新后原定位到之前的 li
layui不同 li 不同数据表格,当前数据表格刷新后原定位到之前的 li
123 0