el-table魔改样式出现BUG,表格内容区域出现滚动条

问题:el-table表格内容区域在高度自适应的情况下冒出滚动条

在这里插入图片描述

解决办法:

  • 代码排查后发现时我设置了fixed:“xxx” 属性就会导致滚动条出现的问题,不设置则无。
[
  {
    type: 'index', label: '序号', fixed: 'left' },
  {
    prop: 'enterprisesName', label: '企业名称' },
  {
    prop: 'orderAmount', label: '销售金额', format: 'price' }
]
<el-table-column fixed="left" label="序号">
</el-table-column>
  • 设置fixed:“xxx” 后elementui就会多渲染几个css。重点看bottom:-1px,这是官方设置的值。我发现重置为bottom:-0px,问题就能解决了,下面直接贴解决代码。
    在这里插入图片描述
  • 把样式放在全局CSS中
.el-table__body-wrapper tr td.el-table-fixed-column--left.is-first-column::before,
.el-table__body-wrapper tr td.el-table-fixed-column--left.is-last-column::before,
.el-table__body-wrapper tr td.el-table-fixed-column--right.is-first-column::before,
.el-table__body-wrapper tr td.el-table-fixed-column--right.is-last-column::before,
.el-table__body-wrapper tr th.el-table-fixed-column--left.is-first-column::before,
.el-table__body-wrapper tr th.el-table-fixed-column--left.is-last-column::before,
.el-table__body-wrapper tr th.el-table-fixed-column--right.is-first-column::before,
.el-table__body-wrapper tr th.el-table-fixed-column--right.is-last-column::before,
.el-table__footer-wrapper tr td.el-table-fixed-column--left.is-first-column::before,
.el-table__footer-wrapper tr td.el-table-fixed-column--left.is-last-column::before,
.el-table__footer-wrapper tr td.el-table-fixed-column--right.is-first-column::before,
.el-table__footer-wrapper tr td.el-table-fixed-column--right.is-last-column::before,
.el-table__footer-wrapper tr th.el-table-fixed-column--left.is-first-column::before,
.el-table__footer-wrapper tr th.el-table-fixed-column--left.is-last-column::before,
.el-table__footer-wrapper tr th.el-table-fixed-column--right.is-first-column::before,
.el-table__footer-wrapper tr th.el-table-fixed-column--right.is-last-column::before,
.el-table__header-wrapper tr td.el-table-fixed-column--left.is-first-column::before,
.el-table__header-wrapper tr td.el-table-fixed-column--left.is-last-column::before,
.el-table__header-wrapper tr td.el-table-fixed-column--right.is-first-column::before,
.el-table__header-wrapper tr td.el-table-fixed-column--right.is-last-column::before,
.el-table__header-wrapper tr th.el-table-fixed-column--left.is-first-column::before,
.el-table__header-wrapper tr th.el-table-fixed-column--left.is-last-column::before,
.el-table__header-wrapper tr th.el-table-fixed-column--right.is-first-column::before,
.el-table__header-wrapper tr th.el-table-fixed-column--right.is-last-column::before {
   
  bottom: 0px !important;
}

还有更好的方案,希望大家尽情探讨一下。
下面还有个关于魔改el-table的bug欢迎大家提供解决思路。
BUG

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-11 15:24:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-11 15:24:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-11 15:24:04       82 阅读
  4. Python语言-面向对象

    2024-01-11 15:24:04       91 阅读

热门阅读

  1. FlinkRestAPI

    2024-01-11 15:24:04       51 阅读
  2. Elasticsearch安装IK分词器踩坑记录

    2024-01-11 15:24:04       61 阅读
  3. 【Linux】journalctl和dmesg日志的区别

    2024-01-11 15:24:04       50 阅读
  4. c++ 正则化

    2024-01-11 15:24:04       41 阅读
  5. PyTorch项目源码学习(1)

    2024-01-11 15:24:04       60 阅读
  6. Vue怎么设置自定义指令

    2024-01-11 15:24:04       51 阅读
  7. Vue组件

    Vue组件

    2024-01-11 15:24:04      55 阅读
  8. PHP对象设计(《深入PHP》第六章内容笔记)

    2024-01-11 15:24:04       57 阅读
  9. Vue3的 响应式数据

    2024-01-11 15:24:04       53 阅读
  10. 金三银四-JVM核心知识高频面试题

    2024-01-11 15:24:04       47 阅读
  11. Leetcode 437. Path Sum III (二叉树遍历好题)

    2024-01-11 15:24:04       53 阅读
  12. 【响应式编程】前置知识和相关技术的总结

    2024-01-11 15:24:04       51 阅读