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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/299721.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【C++】带你学会使用C++线程库thread、原子库atomic、互斥量库mutex、条件变量库condition_variable

C线程相关知识讲解 前言正式开始C官方为啥要提供线程库thread构造函数代码演示this_threadget_id()yield()sleep_until和sleep_for mutex构造函数lock和unlock上锁全局锁局部锁lambda表达式 try_lock 其他锁时间锁递归版本专用锁recursive_mutex 锁的异常处理lock_guardunique_…

springboot整合缓存技术

缓存&#xff08;cache&#xff09; 为啥需要使用缓存 问题描述&#xff1a;企业级应用主要作用是信息处理&#xff0c;当需要读取数据时&#xff0c;由于受限于数据库的访问效率&#xff0c;导致整体系统性能偏低。&#xff08;就是说&#xff1a;应用程序直接与数据库打交道…

深入C++继承:面向对象编程的核心概念

C是一种功能强大的编程语言&#xff0c;支持面向对象编程&#xff08;OOP&#xff09;范式。在面向对象编程中&#xff0c;继承是一种重要的概念&#xff0c;它使得我们能够创建具有层次结构的类&#xff0c;并实现代码的重用和扩展。本文将深入探讨C中的继承机制&#xff0c;介…

[C#]C# OpenVINO部署yolov8-pose姿态估计模型

【源码地址】 github地址&#xff1a;https://github.com/ultralytics/ultralytics 【算法介绍】 Yolov8-Pose算法是一种基于深度神经网络的目标检测算法&#xff0c;用于对人体姿势进行准确检测。该算法在Yolov8的基础上引入了姿势估计模块&#xff0c;通过联合检测和姿势…

屏幕截图--Snagit

Snagit是一款优秀的屏幕、文本和视频捕获、编辑与转换软件。它不仅可以捕获静止的图像&#xff0c;还能获得动态的图像和声音。软件界面干净清爽&#xff0c;功能板块一目了然&#xff0c;为用户提供专业的屏幕录制方案。可以根据自己的需求调整录制视频的分辨率、帧数、输出格…

Linux学习记录——삼십유 传输层TCP协议(1)

文章目录 1、TCP协议报文1、报头和有效载荷的分离2、TCP可靠性3、序号和确认序号4、16位窗口大小5、6个标志位和紧急指针 2、TCP可靠性1、应答机制2、超时重传机制3、连接管理机制握手挥手 3、流量控制 1、TCP协议报文 UDP属于TCP/IP协议族。 1、报头和有效载荷的分离 从头…

邮件群发怎么做才有效果?如何做邮件群发?

邮件群发的注意事项有哪些&#xff1f;QQ邮箱群发邮件的方法&#xff1f; 在当今的数字营销时代&#xff0c;邮件群发已成为企业与客户保持联系的重要手段。但如何确保邮件群发的效果最大化呢&#xff1f;下面&#xff0c;蜂邮EDM将探讨几个关键要素&#xff0c;帮助您更有效地…

HackTheBox - Medium - Linux - Ambassador

Ambassador Ambassador 是一台中等难度的 Linux 机器&#xff0c;用于解决硬编码的明文凭据留在旧版本代码中的问题。首先&#xff0c;“Grafana”CVE &#xff08;“CVE-2021-43798”&#xff09; 用于读取目标上的任意文件。在研究了服务的常见配置方式后&#xff0c;将在其…

阿里云服务器在哪个城市?云服务器地域节点分布表

2024年阿里云服务器地域分布表&#xff0c;地域指数据中心所在的地理区域&#xff0c;通常按照数据中心所在的城市划分&#xff0c;例如华北2&#xff08;北京&#xff09;地域表示数据中心所在的城市是北京。阿里云地域分为四部分即中国、亚太其他国家、欧洲与美洲和中东&…

C++20新特性解析:深入探讨协程库的实现原理与应用

C20新特性解析&#xff1a;深入探讨协程库的实现原理与应用 一、C20的协程库简介二、C20协程基础知识2.1、协程的基本概念和使用方法2.2、C20中的协程支持2.3、协程与传统线程的对比 三、C20协程库的实现原理四、C20协程库的应用实例总结 一、C20的协程库简介 C20引入了对协程…

2024年 复习 HTML5+CSS3+移动web 笔记 之HTML5遍

2023年黑 马学习视频 ---作复习&#xff01;&#xff01;&#xff01; 前言 和 路向 第一天 基础标签 1.开发环境安装 2.标签语法 3.Html 基本骨架 4.标签的关系 5.注释 6.标题标签 7.段落标签 8.换行与水平线标签 9.文本格式化标签 10.图像标签 11.路径&#xff08;绝对和相…

k8s之pod的基础(下)

k8s的pod重启策略 Always deployment的yaml文件只能是Always pod的yaml三种模式都可以&#xff0c;不论正常退出还是非正常退出都重启 OnDailure&#xff1a; 只有状态码非0才会重启。正常退出是不重启的 Never 正常退出和非正常退出都不重启 容器的退出了&#xff0c;pod才…

【软件测试】软件开发各阶段的自动测试技术

说到自动化测试&#xff0c;你可能最为熟悉的就是GUI自动化测试了。比如&#xff0c;早年的C/S架构&#xff0c;通常就是用自动化测试脚本打开被测应用&#xff0c;然后在界面上以自动化的方式执行一系列的操作&#xff1b;再比如&#xff0c;现今的Web站点测试&#xff0c;也是…

模板元编程简介

从引入 template 关键字开始&#xff0c;C里就出现了泛型编程&#xff0c;而又泛型编程衍生出的模板元编程&#xff08;template meta_programming&#xff0c;简称“元编程”&#xff09;则是众多编程范式中最复杂、最强大和最具有权威的一种。所谓“元编程”——metaprogramm…

学习笔记——C++ 逢七过 问题

试用for循环语句解决以下案例&#xff1a; 案例描述&#xff1a;从1开始数到数字100&#xff0c;如果数字个位含有7&#xff0c;或者数字十位含有7&#xff0c;或者该数字是7的倍数&#xff0c;我们打印敲桌子&#xff0c;过&#xff0c;其余数字直接打印输出。 思路&#xf…

C++进阶--map和set的介绍及使用

map和set的介绍及使用 一、关联式容器与键值对关联式容器键值对pair树形结构的关联式容器 二、set2.1 set的介绍2.2 set的使用2.2.1 set的模板参数列表2.2.2 set的构造2.2.3 set的迭代器2.2.4 set的容量2.2.5 set修改操作2.2.6 set的使用举例 三、multiset3.1 multiset的介绍3.…

MySQL——用户管理

目录 一.用户管理 二.用户 1.用户信息 2.创建用户 3.删除用户 4. 修改用户密码 三.数据库的权限 1.给用户授权 2.回收权限 一.用户管理 如果我们只能使用root用户&#xff0c;root的权限非常大,这样存在安全隐患。这时&#xff0c;就需要使用MySQL的用户管理&#xff…

强化学习5——动态规划在强化学习中的应用

动态规划在强化学习中的应用 基于动态规划的算法优良 &#xff1a;策略迭代和价值迭代。 策略迭代分为策略评估和策略提升&#xff0c;使用贝尔曼期望方程得到一个策略的状态价值函数&#xff1b;价值迭代直接使用贝尔曼最优方程进行动态规划&#xff0c;得到最终的最优状态价…

windows下载官方正版notepad++

一、前言 notepad是一款非常好用的编辑器&#xff0c;简洁、快速、高效。可是很多时候我们想去官网下载时&#xff0c;百度出来的都是一堆第三方下载地址&#xff0c;捆绑流氓软件&#xff0c;要么就是付费&#xff0c;作为一款优秀开源软件&#xff0c;我们必须要知道正确的下…

蓝桥杯练习题(一)

&#x1f4d1;前言 本文主要是【算法】——蓝桥杯练习题&#xff08;一&#xff09;的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 …