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

news2024/11/15 12:18:39

问题: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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据库的连接

连接数据库 我们使用WinR输入cmd打开运行窗口 输入:sqlplus并回车 输入用户名和密码,我用的是Scott,密码我自己设置的123456,Scott默认的密码是tiger,回车 这种情况表示登录成功 在连接Scott成功的情况下创建一些数据,在我的资源里面有个Oracle数据基础可以下载,直接复制粘…

09.简单工厂模式与工厂方法模式

道生一&#xff0c;一生二&#xff0c;二生三&#xff0c;三生万物。——《道德经》 最近小米新车亮相的消息可以说引起了不小的轰动&#xff0c;我们在感慨SU7充满土豪气息的保时捷设计的同时&#xff0c;也深深的被本土品牌的野心和干劲所鼓舞。 今天我们就接着这个背景&…

Debezium发布历史49

原文地址&#xff1a; https://debezium.io/blog/2019/02/19/reliable-microservices-data-exchange-with-the-outbox-pattern/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. 使用发件箱模式进行可靠的微服务数…

JSP内置对象:forward动作标记和sendRedirect()方法实现页面跳转的区别

1.forward为服务器跳转&#xff0c;浏览器的地址栏不变&#xff1b; sendRedirect&#xff08;&#xff09;为客户端跳转&#xff0c;浏览器的地址栏改变变新页面的URL。 2.执行到forward标记出现处停止当前JSP页面的继续执行&#xff0c;而转向标记中的page属性指定的页面&am…

【Matplotlib】基础设置之图像处理05

图像基础 导入相应的包&#xff1a; import matplotlib.pyplot as plt import matplotlib.image as mpimg import numpy as np %matplotlib inline导入图像 我们首先导入上面的图像&#xff0c;注意 matplotlib 默认只支持 PNG 格式的图像&#xff0c;我们可以使用 mpimg.im…

一文搞定JVM内存模型

鲁大猿&#xff0c;寻精品资料&#xff0c;帮你构建Java全栈知识体系 www.jiagoujishu.cn 运行时数据区 内存是非常重要的系统资源&#xff0c;是硬盘和 CPU 的中间仓库及桥梁&#xff0c;承载着操作系统和应用程序的实时运行。JVM 内存布局规定了 Java 在运行过程中内存申请、…

56K star!一键拥有跨平台 ChatGPT 应用:ChatGPT-Next-Web

前言 现在围绕 openai 的客户端层出不穷&#xff0c;各路开发大神可以说是各出绝招&#xff0c;我也试用过几个国内外的不同客户端。 今天我们推荐的开源项目是目前我用过最好的ChatGPT应用&#xff0c;在GitHub超过56K Star的开源项目&#xff1a;ChatGPT-Next-Web。 ChatGP…

Java分布式锁理论(redis、zookeeper) 详解

目录 一、分布式锁有哪些应用场景&#xff1f; 二、分布式锁的实现方案 三、zookeeper实现分布式锁 一直不释放锁怎么办&#xff1f; 如何避免分布式锁羊群效应问题&#xff1f; 四、redis实现分布式锁 一、分布式锁有哪些应用场景&#xff1f; 1、定时任务 2、秒杀抢购…

XAgent调研

文章目录 1 简介2 快速测试 Quick Start3 结构分析 1 简介 XAgent&#xff08;链接&#xff09;是一个开源的&#xff0c;基于大语言模型的agent构建框架&#xff1b;其目标是构建出能够辅助人类处理各类任务的自动助手 定位&#xff1a;一个全能的&#xff0c;自动的辅助agen…

智邦国际ERP GetPersonalSealData.ashx接口存在SQL注入漏洞 附POC软件

@[toc] 智邦国际ERP GetPersonalSealData.ashx接口存在SQL注入漏洞 附POC软件 免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该…

【普中开发板】基于51单片机的温度报警器LCD1602_可调上下限( proteus仿真+程序+设计报告+讲解视频)

基于51单片机的温度报警器LCD1602_可调上下限 1.主要功能&#xff1a;资料下载链接&#xff1a; 普中开发板实物演示图&#xff1a;2.仿真3. 程序代码4. 设计报告5. 设计资料内容清单 【普中】基于51单片机的温度报警器LCD1602_可调上下限 ( proteus仿真程序设计报告讲解视频&a…

安全基础~信息搜集3

文章目录 知识补充APP信息搜集php开发学习理解漏洞 知识补充 端口渗透总结 python Crypto报错&#xff1a;https://blog.csdn.net/five3/article/details/86160683 APP信息搜集 1. AppInfoScanner 移动端(Android、iOS、WEB、H5、静态网站)信息收集扫描工具 使用教程 演示&…

LCD—液晶显示

本节主要介绍以下内容 显示器简介 液晶控制原理 秉火3.2寸液晶屏简介 使用FSMC模拟8080时序 NOR FLASH时序结构体 FSMC初始化结构体 一、显示器简介 显示器属于计算机的I/O设备&#xff0c;即输入输出设备。它是一种将特定电子信息输出到屏幕上再反射到人眼的显示工具。…

用通俗易懂的方式讲解:使用 Mistral-7B 和 Langchain 搭建基于PDF文件的聊天机器人

在本文中&#xff0c;使用LangChain、HuggingFaceEmbeddings和HuggingFace的Mistral-7B LLM创建一个简单的Python程序&#xff0c;可以从任何pdf文件中回答问题。 一、LangChain简介 LangChain是一个在语言模型之上开发上下文感知应用程序的框架。LangChain使用带prompt和few…

【Spring Boot 源码学习】SpringApplication 的定制化介绍

Spring Boot 源码学习系列 SpringApplication 的定制化介绍 一、引言二、往期内容三、主要内容1. 基础配置1.1 设置关闭 Banner1.2 设置自定义 Banner 打印对象1.3 设置应用程序主入口类1.4 设置用于创建应用程序上下文的工厂1.5 添加 BootstrapRegistry 初始化器实现1.6 设置或…

计算机毕业设计 基于Javaweb的城乡居民基本医疗信息管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

通俗易懂的15个Java Lambda表达式案例

文章目录 1. **实现Runnable接口**&#xff1a;2. **事件监听器**&#xff08;如Swing中的ActionListener&#xff09;&#xff1a;3. **集合遍历**&#xff08;使用forEach方法&#xff09;&#xff1a;4. **过滤集合**&#xff08;使用Stream API&#xff09;&#xff1a;5. …

VMware17 下载安装教程

VMware17 下载安装ubuntu22.04虚拟机安装 一、VM安装 1.打开官方下载地址&#xff1a;https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html 跳转页面后&#xff0c;点击左边的Download oad now&#xff0c;下载的就是最新版的 Workstation 17 …

Fiber Golang 中的路由和中间件

掌握 GoLang Fiber 中的路由和中间件艺术&#xff0c;以进行高效的 Web 开发 在网络开发领域中&#xff0c;创建一个有效地路由和管理各种任务的 Web 应用程序至关重要。路由决定了如何处理传入的请求&#xff0c;而中间件在执行任务&#xff0c;如身份验证、日志记录和请求解…

【vue】emit 的理解与使用

文章目录 介绍流程示例效果父组件子组件 介绍 $emit 是 Vue 组件实例中的一个方法&#xff0c;用来触发自定义事件&#xff0c;并向父组件传递信息它接受两个参数&#xff1a;事件名称和可选参数this.$emit(事件名称, 参数);流程 示例 效果 触发前 触发后 父组件 父组件使…