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

相关文章
|
9月前
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
315 0
|
9月前
|
JavaScript
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
196 0
|
7月前
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
104 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
element ui table 表格高度自适应
设置element ui table 表格高度自适应
1938 0
|
1月前
|
JavaScript 前端开发 索引
Element_Table的单元格合并
Element_Table的单元格合并
|
1月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
4月前
|
前端开发 小程序
使用element UI-table表格列宽自适应 【已解决】
使用element UI-table表格列宽自适应 【已解决】
|
6月前
element Table表格隐藏列
element Table表格隐藏列
112 0
|
6月前
|
开发者
element el-table固定列凹陷问题
element el-table固定列凹陷问题
41 0
el-table 获取选中后的某一个值(整理)
el-table 获取选中后的某一个值(整理)