element el-table 设置fixed导致行错乱问题

简介: 文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。

首先看有问题的样式:
在这里插入图片描述
解决:

// 解决左右 对不齐 的情况
// el-table 左右有列固定时,fixed为left和right时,行未对齐解决办法
// * 产生原因: el-table底部有滚动条,固定列底部没有滚动条
// * 解决办法: 在el-table的表格中设置padding-bottom的内边距跟滚动条等高
/deep/.el-table__fixed,
/deep/.el-table__fixed-left,
/deep/.el-table__fixed-right {
   
  // 10 是我这里全局定义的滚动条的高度
  height: calc(100% - 10px) !important;
}

/deep/.el-table__fixed-body-wrapper {
   
  height: 100% !important;
}

/deep/.el-table__fixed-body-wrapper .el-table__body {
   
  /*滚动条高度*/
  // 10 是我这里全局定义的滚动条的高度
  padding-bottom: 10px !important;
}

el-table 左右有列固定时,fixed为left和right时,行未对齐解决办法

  • 产生原因: el-table底部有滚动条,固定列底部没有滚动条
  • 解决办法: 在el-table的表格中设置padding-bottom的内边距跟滚动条等高

参考:
el-table 设置fixed导致行错乱问题

目录
相关文章
|
11月前
|
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
207 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
2513 0
|
4月前
|
前端开发
z-index失效的几种情况,父标签position属性为relative的时候,详解
z-index失效的几种情况,父标签position属性为relative的时候,详解
element-ui中Select 选择器value-key的使用
element-ui中Select 选择器value-key的使用
|
10月前
|
开发者
element el-table固定列凹陷问题
element el-table固定列凹陷问题
96 0
element中el-select下拉框位置错乱问题
element中el-select下拉框位置错乱问题
507 0
|
前端开发
前端工作总结182-element-ui el-table sortable属性 参数详解
前端工作总结182-element-ui el-table sortable属性 参数详解
388 0
前端工作总结182-element-ui el-table sortable属性 参数详解