当前位置: 首页 > news >正文

【elementui】记录el-table设置左、右列固定时,加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

当前elementui版本:2.8.2

  • 现象:此处el-table__body-wrapper默认的滚动条宽度为8px,我加大到10px,如果不设置fixed一切正常,设置fixed后会被遮挡一点
    在这里插入图片描述

  • el-table__fixed-right::before, .el-table__fixed::before
    在这里插入图片描述

  • 设置css解决遮挡

// 左固定列
.el-table__fixed {height: calc(100% - 10px) !important;
}// 右固定列
.el-table__fixed-right {height: calc(100% - 10px) !important;right: 10px !important;
}// 设置右固定列才会出现该元素,不然不用写
.el-table__fixed-right-patch {width: 10px !important;
}// 设置这一句是因为,当滚动条向下滑动时,固定列的行会和其他列的行错位,设置完这个就不错位了
.el-table__fixed-body-wrapper .el-table__body {padding-bottom: 10px;box-sizing: border-box;
}// 设置这句是因为上第二张图,在某些场景下那条线会很突兀,就设置颜色透明让视觉上看不见   
.el-table__fixed-right::before, .el-table__fixed::before {background: transparent !important;
}// 滚动条样式
.el-table__body-wrapper::-webkit-scrollbar {width: 10px; height: 10px; background: transparent;border-radius: 4px;
}.el-table__body-wrapper::-webkit-scrollbar-thumb {// background-color: rgba(94, 171, 246, .79);border-radius: 12px;
}
  • 如果能够确保表格在任何屏幕下都会出现横向滚动和竖向滚动,那么上述设置已经够了。

  • 但我有一张表可以筛选列,就导致当列选的比较少时不会出现横向滚动,如果最后一行数据恰巧换行,有部分文字正好会被固定列的height: calc(100% - 10px) !important遮挡住,如下图所示,所以就要兼容两种情况

在这里插入图片描述

  • 由于我发现,出现横向滚动条时,el-table__body-wrapper会出现类名is-scrolling-right或is-scrolling-left或is-scrolling-middle,无横向滚动时,el-table__body-wrapper的类名叫做is-scrolling-none,就可以利用这一点再设置无横向滚动时的css
    在这里插入图片描述

在这里插入图片描述

// ~:用于选择某个元素之后的兄弟元素
// el-table__fixed是左固定列,要设置右固定列就是写:
// .el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed-right {}
.el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed {height: 100% !important; .el-table__fixed-body-wrapper {right: 2px !important;}
}

最后:反正具体css设置还要看自己项目的当前情况,但是方法是这么个方法,可以通过这些类名去设置以达到目的

相关文章:

【elementui】记录el-table设置左、右列固定时,加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

当前elementui版本:2.8.2 现象:此处el-table__body-wrapper默认的滚动条宽度为8px,我加大到10px,如果不设置fixed一切正常,设置fixed后会被遮挡一点 el-table__fixed-right::before, .el-table__fixed::before 设置…...

Python人工智能:一、语音合成和语音识别

在Python中,语音合成(Text-To-Speech, TTS)和语音识别(Speech-To-Text, STT)是两个非常重要的功能,它们在人工智能、自动化、辅助技术以及许多其他领域都有广泛的应用。下面将分别介绍这两个领域在Python中…...

C/C++进阶 (8)哈希表(STL)

个人主页:仍有未知等待探索-CSDN博客 专题分栏:C 本文着重于模拟实现哈希表,并非是哈希表的使用。 实现的哈希表的底层用的是线性探测法,并非是哈希桶。 目录 一、标准库中的哈希表 1、unordered_map 2、unordered_set 二、模…...

2024电赛H题参考方案(+视频演示+核心控制代码)——自动行驶小车

目录 一、题目要求 二、参考资源获取 三、TI板子可能用到的资源 1、环境搭建及工程移植 2、相关模块的移植 四、控制参考方案 1、整体控制方案视频演示 2、视频演示部分核心代码 五、总结 一、题目要求 小编自认为:此次控制类类型题目的H题,相较于往年较…...

设计模式14-享元模式

设计模式14-享元模式 由来动机定义与结构代码推导特点享元模式的应用总结优点缺点使用享元模式的注意事项 由来动机 在很多应用中,可能会创建大量相似对象,例如在文字处理器中每个字符对象。在这些场景下,如果每个对象都独立存在&#xff0c…...

Javascript中canvas与svg详解

Canvas 在JavaScript中&#xff0c;<canvas> 元素用于在网页上绘制图形&#xff0c;如线条、圆形、矩形、图像等。它是一个通过JavaScript和HTML的<canvas>元素来工作的绘图表面。<canvas> 元素自身并不具备绘图能力&#xff0c;它仅仅提供了一个绘图环境&a…...

【BUG】已解决:No Python at ‘C:Users…Python Python39python. exe’

No Python at ‘C:Users…Python Python39python. exe’ 目录 No Python at ‘C:Users…Python Python39python. exe’ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班…...

Flink SQL 的工作机制

前言 Flink SQL 引擎的工作流总结如图所示。 从图中可以看出&#xff0c;一段查询 SQL / 使用TableAPI 编写的程序&#xff08;以下简称 TableAPI 代码&#xff09;从输入到编译为可执行的 JobGraph 主要经历如下几个阶段&#xff1a; 将 SQL文本 / TableAPI 代码转化为逻辑执…...

[AI Mem0] 源码解读,带你了解 Mem0 的实现

Mem0 的 CRUD 到底是如何实现的&#xff1f;我们来看下源码。 使用 先来看下&#xff0c;如何使用 Mem0 import os os.environ["OPENAI_API_KEY"] "sk-xxx"from mem0 import Memorym Memory()# 1. Add: Store a memory from any unstructured text re…...

【LLM】-10-部署llama-3-chinese-8b-instruct-v3 大模型

目录 1、模型下载 2、下载项目代码 3、启动模型 4、模型调用 4.1、completion接口 4.2、聊天&#xff08;chat completion&#xff09; 4.3、多轮对话 4.4、文本嵌入向量 5、Java代码实现调用 由于在【LLM】-09-搭建问答系统-对输入Prompt检查-CSDN博客 关于提示词注入…...

C语言 之 理解指针(4)

文章目录 1. 字符指针变量2. 数组指针变量2.1 对数组指针变量的理解2.2 数组指针变量的初始化 3. 二维数组传参的本质4. 函数指针变量4.1 函数指针变量的创建4.2 函数指针变量的使用 5. 函数指针数组 1. 字符指针变量 我们在前面使用的主要是整形指针变量&#xff0c;现在要学…...

Java设计模式—单例模式(Singleton Pattern)

目录 一、定义 二、应用场景 三、具体实现 示例一 示例二 四、懒汉与饿汉 饿汉模式 懒汉模式 五、总结 六、说明 一、定义 二、应用场景 ‌单例模式的应用场景主要包括以下几个方面&#xff1a; ‌日志系统&#xff1a;在应用程序中&#xff0c;通常只需要一个日…...

AV1帧间预测(二):运动补偿

运动补偿(Motion Compensation,MC)是帧间预测最基础的工具&#xff0c;AV1支持两种运动补偿方式&#xff0c;一种是传统的平移运动补偿&#xff0c;另一种是仿射运动补偿。下面分别介绍这两种运动补偿方法。 平移运动补偿 平移运动补偿是最传统的运动补偿方式&#xff0c;H.26…...

数学建模(5)——逻辑回归

一、二分类 import numpy as np import matplotlib.pyplot as plt from sklearn import datasets from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler from sklearn.linear_model import LogisticRegression from sklea…...

【C++高阶】:深入探索C++11

✨ 心似白云常自在&#xff0c;意如流水任东西 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;C学习 &#x1f680; 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f4…...

6. 自定义Docker镜像

如何自定义Docker镜像&#xff1a;从基础到实践 Docker作为一个容器化平台&#xff0c;使得应用的打包、分发和运行变得更加高效和便捷。本文将详细介绍如何自定义一个Docker镜像&#xff0c;包括镜像的构成、分层原理、创建自定义镜像的具体步骤&#xff0c;并演示如何打包和…...

「12月·长沙」人工智能与网络安全国际学术会议(ISAICS 2024)

人工智能与网络安全国际学术会议(ISAICS 2024)将于2024年12月20日-2024年12月22日在湖南长沙召开。会议中发表的文章将会被收录,并于见刊后提交EI核心索引。会议旨在在为国内与国际学者搭建交流平台,推进不同学科领域的融合发展&#xff0c;就当今人工智能与网络安全范畴内各学…...

【技术支持案例】使用S32K144+NSD8381驱动电子膨胀阀

文章目录 1. 前言2. 问题描述3. 理论分析3.1 NSD8381如何连接电机3.2 S32K144和NSD8381的软件配置 4.测试验证4.1 测试环境4.2 测试效果4.3 测试记录 1. 前言 最近有客户在使用S32K144NSD8381驱动电子膨胀阀时&#xff0c;遇到无法正常驱动电子膨胀阀的情况。因为笔者也是刚开…...

第二期:集成电路(IC)——智能世界的微观建筑大师

嘿&#xff0c;小伙伴们&#xff01;&#x1f44b; 我是你们的老朋友小竹笋&#xff0c;一名热爱创作和技术的工程师。上一期我们聊了聊AI芯片&#xff0c;这次我们要深入到更微观的层面&#xff0c;来探究集成电路&#xff08;IC&#xff09;的世界。准备好一起探索了吗&#…...

基于物联网的区块链算力网络,IGP/BGP协议

目录 基于物联网的区块链算力网络 IGP/BGP协议 IGP(内部网关协议) BGP(边界网关协议) 内部使用ISP的外部使用BGP的原因 一、网络规模和复杂性 二、路由协议的特性 三、满足业务需求 四、结论 基于物联网的区块链算力网络 通 过 多个物联网传感器将本地计算…...

详解bat脚本:语法、常见用法、注意事项、示例

文章目录前言1.什么是BAT 脚本2.基本语法2.1 注释2.2 基本命令执行3.常用命令详解4.变量使用1. 定义变量2. 使用变量&#xff08;要用 % 括起来&#xff09;5.流程控制5.1 if 条件判断基本语法&#xff1a;常用比较&#xff1a;示例&#xff1a;5.2 for 循环遍历文件&#xff0…...

Fiji在macOS系统的兼容性解决方案:从启动故障到配置优化的完整指南

Fiji在macOS系统的兼容性解决方案&#xff1a;从启动故障到配置优化的完整指南 【免费下载链接】fiji A "batteries-included" distribution of ImageJ :battery: 项目地址: https://gitcode.com/gh_mirrors/fi/fiji Fiji作为科学图像处理领域广泛使用的"…...

区块链+AI的致命组合:深扒某DeFi项目的测试黑幕

在数字经济浪潮中&#xff0c;区块链与人工智能&#xff08;AI&#xff09;的融合被视为金融创新的“致命组合”&#xff0c;尤其在去中心化金融&#xff08;DeFi&#xff09;领域&#xff0c;它承诺了前所未有的效率和智能决策能力。然而&#xff0c;这一组合也带来了隐蔽的测…...

热点 | Harness 架构深度解析:AI智能体编排框架的核心原理

热点 | Harness 架构深度解析:AI智能体编排框架的核心原理 声明: 📝 作者:甜城瑞庄的核桃(ZMJ) 原创学习笔记,欢迎分享,但请保留作者信息及原文链接哦~ 本文深度解析 Claude Code 背后的核心架构 Harness,揭示为何"Harness 比模型更重要"成为 2026 年 AI …...

别再死记硬背MIPI状态转换图了!用Python脚本模拟单向/双向Data Lane状态机

用Python脚本动态解析MIPI状态机&#xff1a;从理论到实践的可视化之旅 每次打开MIPI协议文档看到那些密密麻麻的状态转换图&#xff0c;是不是感觉像在解读外星密码&#xff1f;作为嵌入式开发者&#xff0c;我们需要的不是死记硬背那些LP-11→LP-01的箭头指向&#xff0c;而…...

Sulpho-Methyltetrazine-NHS ester,磺化甲基四嗪-琥珀酰亚胺酯的结构特点与功能

Sulpho-Methyltetrazine-NHS ester 是一种结合了磺酸基团、甲基四嗪和 NHS 酯三大功能模块的化学试剂&#xff0c;在生物化学和药物研发等领域具有广泛应用。以下是对其详细介绍&#xff1a;一、基本信息英文名称&#xff1a;Sulpho-Methyltetrazine-NHS ester&#xff08;或 S…...

koanf命令行参数解析:高级POSIX兼容标志处理指南

koanf命令行参数解析&#xff1a;高级POSIX兼容标志处理指南 【免费下载链接】koanf Simple, extremely lightweight, extensible, configuration management library for Go. Supports JSON, TOML, YAML, env, command line, file, S3 etc. Alternative to viper. 项目地址:…...

Qwen3-TTS开源模型教程:Gradio接口封装+API服务发布完整指南

Qwen3-TTS开源模型教程&#xff1a;Gradio接口封装API服务发布完整指南 1. 前言&#xff1a;为什么你需要一个专属的语音合成服务&#xff1f; 想象一下&#xff0c;你正在开发一个智能客服应用&#xff0c;需要为不同国家的用户提供多语言的语音回复&#xff1b;或者你是一个…...

医疗AI智能体:从数据到关怀人文设计:告别冰冷精准,构建有温度的诊疗交互.131

一、智能体的人文设计医疗AI智能体以大模型为核心&#xff0c;串联医学知识图谱、实体识别模块、风险评估模块、话术生成模块、伦理审核模块五大核心组件&#xff0c;最终实现精准医学判断 人性化交互的双重目标。而在医疗场景中&#xff0c;用户的核心需求从来不是单纯的数据…...

告别Bad Username or Password:手把手教你用MQTTX正确连接OneNET物联网开发平台(附Token生成避坑点)

物联网开发实战&#xff1a;OneNET平台MQTT连接全流程解析与避坑指南 在物联网项目开发中&#xff0c;MQTT协议因其轻量级和高效性成为设备连接的首选方案。而OneNET作为国内主流的物联网平台&#xff0c;为开发者提供了完整的MQTT接入能力。但在实际对接过程中&#xff0c;&q…...