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

相关文章
|
缓存
若依 this.$router.push 同地址不同参,页面不刷新问题
若依 this.$router.push 同地址不同参,页面不刷新问题
1851 0
|
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
1007 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10702 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
4811 0
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
2725 0
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
3695 0
el-input限制输入整数等分析
开发指南029-el-table-column对齐属性
按开发文档和正常理解,el-table-column具有属性align,可以填left,center,right控制内容的对齐方式
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
4622 0
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
5152 0

热门文章

最新文章