element UI :el-table横向列内容超出宽度,滚动条不显示问题

news2024/12/25 15:28:36

是否能解决你问题的前提

**看到这篇文章的解决问题的方案之前,请先回忆你是否在项目中的全局样式或者私有组件中去单独设置过滚动条样式。如果有 请继续往下看:**

单独设置过滚动条样式代码实例:

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  background: #cfcbcb;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 6px;
  background: #ededed;
}

上面修改样式让滚动条变细由默认的20px变成6px;

问题现象

在这里插入图片描述

如上图实例:表格横向列内容已经超出表格但是却没有出现滚动条。

需要说明的是,如果是正常情况,el-table 在设置了固定宽度后,如果列内容的每一个 el-table-column 标签 也 设置了 固定宽度,且所有列的宽度之和大于了 表格el-table 的固定宽度的情况下,el-table组件会默认出现横向的滚动条并可实现滚动查看遮挡的列内容区域。

再你 没有去修改el-table内置组件样式的前提下 ,你如果 还修改了页面滚动条样式 ,那么el-table横向内容超过却不出现滚动条的原因就可能是 你 滚动条样式问题

问题解决

让我们看上面修改滚动条样式的代码,其中

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

如果是竖向滚动条那么其宽度就是 6px,但是这里如果是横向的滚动条,那么滚动条的高度却是 1 px 一条线,如果你的表单恰巧也是带 边框的,那么高度为1 px 的滚动条 就和边框重合了,并且点击也不会获取焦点,就和没有滚动条一样。所以这里我们只需要将这里滚动条的高度设置为6 px 即可解决问题。

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

其他可能出现的此类问题的原因

  • 1.查看代码看是否有隐藏页面滚动条的逻辑
  • 2.查看代码是否修改了el-table内置样式,例如修改了以下类有关overflow相关的属性:
/* 设置el-table 表头的样式 */
::v-deep .el-table__header-wrapper {
}
/* 设置el-table 表主体的样式 */
::v-deep .el-table__body-wrapper {
}
/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
}

  • 3.查看代码表格区域是否固定宽度 或者 是否确实有内容超出情况。
  • 4.查看是否存在组件嵌套使用时的代码样式冲突情况。
  • 5.请继续百度查阅!

Alt

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

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

相关文章

STM32智能家居电力管理系统教程

目录 引言环境准备智能家居电力管理系统基础代码实现:实现智能家居电力管理系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景:电力管理与优化问题解决方案与优化收尾与总结 1. 引言 智能家居电…

代码随想录——最后一块石头的重量(Leetcode1046)

题目链接 class Solution {public int lastStoneWeight(int[] stones) {int len stones.length;if(len 1){return stones[0];}if(len 2){return Math.abs(stones[0] - stones[1]);}while(true){Arrays.sort(stones);if(stones[len - 2] 0){break;}stones[len - 1] stone…

一维差分的实现

这是C算法基础-基础算法专栏的第十三篇文章,专栏详情请见此处。 引入 上次我们学习了前缀和的实现,它可以快速解决求区间和问题。这次我们要学习差分,它是前缀和的逆运算,可以快速解决对序列的一个区间同时加或减一个数这样的问题…

LabVIEW在CRIO中串口通讯数据异常问题

排查与解决步骤 检查硬件连接: 确保CRIO的串口模块正确连接,并且电缆无损坏。 确认串口模块在CRIO中被正确识别和配置。 验证串口配置: 在LabVIEW项目中,检查CRIO目标下的串口配置,确保波特率、数据位、停止位和校验…

用杰理芯片发不出100hz~1200hz频率的PWM波

思路: 问原厂工程师 回复: 看下是不是数据做除法的时候越界了,如果有用户手册,直接看下那几个定时器的寄存器算下就知道为什么 芯片: AD155A 行动: 相关文档和代码: TMR_PR:1…

云计算安全流程与管控要求的全面解析

华为云安全流程与管控要求的全面解析 引言 在云计算技术迅猛发展的背景下,云安全问题日益凸显其重要性。华为云作为行业的领军企业,其安全流程与管控要求不仅关乎自身的服务稳定性,更直接影响到广大用户的业务安全。本文将深入解析华为云的安…

win注册表怎么打开

注册表怎么打开 在使用Windows电脑时,有时我们可能需要访问注册表(Registry Editor),以进行一些高级的系统设置和调整。注册表包含了系统的配置信息和设置选项,因此在操作时需格外小心谨慎。现在,让我来教你…

npm install时报错 reason: certificate has expired

在VS code中导入新项目,执行npm install时报错: npm warn old lockfile Could not fetch metadata for antv/g3.4.10 FetchError: request to https://registry.npm.taobao.org/antv%2fg failed, reason: certificate has expirednpm warn old lockfile …

「C++系列」判断

文章目录 一、判断1. if 语句2. if-else 语句3. if-else if-else 语句链4. switch 语句注意事项 二、应用场景1. 用户输入验证2. 决策逻辑3. 循环控制4. 排序算法 三、相关链接 一、判断 在C中,判断通常是通过条件语句来实现的,这些语句允许程序根据特定…

UDP报文结构详解:一篇文章带你搞懂

大家好呀!我是你们的老朋友小米,一个活泼开朗的29岁技术达人。今天我们来聊聊网络基础中的一个重要概念——UDP报文格式。相信很多小伙伴在学习网络编程或者网络协议时,都接触过UDP这个名词。UDP,全称是User Datagram Protocol(用户数据报协议),是一种无连接的传输层协议…

CTF-Web习题:[BJDCTF2020]ZJCTF,不过如此

题目链接:[BJDCTF2020]ZJCTF,不过如此 解题思路 访问靶场链接,出现的是一段php源码,接下来做一下代码审阅,发现这是一道涉及文件包含的题 主要PHP代码语义: file_get_contents($text,r); 把$text变量所…

物理站群多ip服务器如何租用

物理站群多IP服务器的租用是企业或网站管理者为了提升SEO排名、分散风险、增加网站稳定性和提高访问速度而采用的一种策略。下面是一套详细的科普指南,帮助你理解如何租用物理站群多IP服务器: 1. 需求分析 首先,明确你的具体需求,…

7月18日学习打卡,数据结构堆

hello大家好呀,本博客目的在于记录暑假学习打卡,后续会整理成一个专栏,主要打算在暑假学习完数据结构,因此会发一些相关的数据结构实现的博客和一些刷的题,个人学习使用,也希望大家多多支持,有不…

简单工厂、工厂方法与抽象工厂之间的区别

简单工厂、工厂方法与抽象工厂之间的区别 1、简单工厂(Simple Factory)1.1 定义1.2 特点1.3 示例场景 2、工厂方法(Factory Method)2.1 定义2.2 特点2.3 示例场景 3、抽象工厂(Abstract Factory)3.1 定义3.…

uni-app学习HBuilderX学习-微信开发者工具配置

HBuilderX官网:简介 - HBuilderX 文档 (dcloud.net.cn)https://hx.dcloud.net.cn/ uni-app官网: uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/quickstart-hx.htmlHBuilder下载安装:打开官网 uni-app项目的微信开发者工具配置…

【python】Python高阶函数--map函数的详细语法分析与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

第二篇 Vue项目的搭建

1、脚手架安装 npm init vuelatest:官方提供的Vue项目脚手架工具,帮助我们搭建一个最简单的vue应用。 2、vs打开项目文件夹 打开脚手架生成的文件夹到vs并安装volar插件,以便vs能够支持vue格式代码 3、启动项目 npm run dev:vu…

Leetcode1929. 数组串联

问题描述&#xff1a; 给你一个长度为 n 的整数数组 nums 。请你构建一个长度为 2n 的答案数组 ans &#xff0c;数组下标 从 0 开始计数 &#xff0c;对于所有 0 < i < n 的 i &#xff0c;满足下述所有要求&#xff1a; ans[i] nums[i]ans[i n] nums[i] 具体而言…

目标检测算法与应用算法 DS集成 接口相关_v0.1

目录 文章目录 目录0. 目标GPS信息、速度、加速度、航向角信息的输出1. 目标检测算法接口1.1 模型相关1.2 检测结果相关 2. 应用算法接口2.1 bool cross_line; //跨线&#xff08;变道压线检测&#xff09;2.2 bool break_in; //闯入&#xff08;目标闯入&#xff09;2.3 bool …