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

【element-plus】 table表格每行圆角解决方案 element也通用

系列文章目录

【Vue3+Vite+Ts+element-plus】使用tsx实现左侧栏菜单无限层级封装

前言

我们在使用element-pluselementtable时是否有时UI给到的UI效果是如下面这样的,但是我们翻遍了组件库的文档 调整了很多次样式 发现在 左右侧栏固定的时候 普通的方法是完全没效果的。要么就是左侧没圆角 要么就是右侧没圆角,通过普通的方法是解决不了圆角问题的。接下来我将 分成两个方案 一个是普通表格 一个是左侧右侧固定表格通过伪类的方式解决此问题

圆角效果图片

一、vue 代码如下

这里定义custom-table 类是方便下面scss代码的使用

  <el-tableclass="custom-table"....></el-table>

三、 scss 代码如下(普通表格实现效果 没有使用伪类)

//表格头部圆角
:deep(.el-table__header-wrapper) {border-radius: 8px;z-index: 100 !important;overflow: hidden;-webkit-border-radius: 8px;-moz-border-radius: 8px;-ms-border-radius: 8px;-o-border-radius: 8px;
}
//此代码是让每行左侧变圆
:deep(.el-table td:first-child) {border-left: 1px solid #e2ecfa;border-radius: 8px 0 0 8px;padding: 2px;z-index: 999;background: #fff;
}
/此代码是让每行右侧变圆
:deep(.el-table td:last-child) {border-right: 1px solid #e2ecfa;border-radius: 0 8px 8px 0;z-index: 999;padding: 2px;background: #fff;
}

三、 scss 代码如下(如果你的项目有左侧及右侧固定效果的 请使用此方案)

下面是实现table表格的代码

//表格头部圆角
:deep(.el-table__header-wrapper) {border-radius: 8px;z-index: 100 !important;overflow: hidden;-webkit-border-radius: 8px;-moz-border-radius: 8px;-ms-border-radius: 8px;-o-border-radius: 8px;
}//此代码是让每行左侧变圆
:deep(.el-table td:first-child) {border-left: 1px solid #e2ecfa;border-radius: 8px 0 0 8px;padding: 2px;z-index: 999;background: #fff;
}
/此代码是让每行右侧变圆
:deep(.el-table td:last-child) {border-right: 1px solid #e2ecfa;border-radius: 0 8px 8px 0;z-index: 999;padding: 2px;background: #fff;
}
.custom-table .el-table__fixed-left-wrapper,
.custom-table .el-table__fixed-right-wrapper {overflow: visible;
}
.custom-table::before,
.custom-table::after {content: '';position: absolute;top: 0;bottom: 0;width: 8px; z-index: 1;
}.custom-table::before {left: 0;background-color: #fff; border-top-left-radius: 10px;border-bottom-left-radius: 10px;
}.custom-table::after {right: 0;background-color: #fff; border-radius: 10px;
}
.control-table {position: relative;
}

相关文章:

【element-plus】 table表格每行圆角解决方案 element也通用

系列文章目录 【Vue3ViteTselement-plus】使用tsx实现左侧栏菜单无限层级封装 前言 我们在使用element-plus或element 的table时是否有时UI给到的UI效果是如下面这样的&#xff0c;但是我们翻遍了组件库的文档 调整了很多次样式 发现在 左右侧栏固定的时候 普通的方法是完全…...

【状态估计】基于UKF、AUKF的电力系统负荷存在突变时的三相状态估计研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

webstorm格式化代码后单引号转成了双引号

webStorm格式化js代码时单引号变成了双引号&#xff0c;问题如下&#xff1a; 格式化前&#xff1a; 格式化后&#xff1a; 解决办法&#xff1a; window: File -> Settings -> Editor -> Code Style -> Javascript&#xff1b; mac: webStorm -> Preference …...

在langchain中使用带简短知识内容的prompt template

简介 langchain中有个比较有意思的prompt template叫做FewShotPromptTemplate。 他是这句话的简写&#xff1a;“Prompt template that contains few shot examples.” 什么意思呢&#xff1f;就是说在Prompt template带了几个比较简单的例子。然后把这些例子发送给LLM&…...

java医院电子病历系统源码:云端SaaS服务 前后端分离模式开发和部署

电子病历系统是什么&#xff1f; 电子病历是指医务人员在医疗活动过程中,使用医疗机构信息系统生成的文字、符号、图表、图形、数据、影像等数字化信息,并能实现存储、管理、传输和重现的医疗记录,是病历的一种记录形式。 医院通过电子病历以电子化方式记录患者就诊的信息&…...

【Golang 接口自动化01】使用标准库net/http发送Get请求

目录 发送Get请求 响应信息 拓展 资料获取方法 发送Get请求 使用Golang发送get请求很容易&#xff0c;我们还是使用http://httpbin.org作为服务端来进行演示。 package mainimport ("bytes""fmt""log""net/http""net/url&qu…...

Excel透视表与python实现

目录 一、Excel透视表 1、源数据 2、数据总分析 3、数据top分析 二、python实现 1、第一张表演示 2、第二张表演示 一、Excel透视表 1、源数据 1&#xff09;四个类目&#xff0c;每类50条数据 2&#xff09;数据内容 2、数据总分析 1&#xff09;选择要分析的字段&…...

二级制部署kubernetes(1.20)

&#x1f618;作者简介&#xff1a;一名运维工作人员。 &#x1f44a;宣言&#xff1a;人生就是B&#xff08;birth&#xff09;和D&#xff08;death&#xff09;之间的C&#xff08;choise&#xff09;&#xff0c;做好每一个选择。 &#x1f64f;创作不易&#xff0c;动动小…...

云曦暑期学习第二周——文件上传漏洞

1.文件上传 1.1原理 一些web应用程序中允许上传图片、视频、头像和许多其他类型的文件到服务器中。 文件上传漏洞就是利用服务端代码对文件上传路径变量过滤不严格将可执行的文件上传到一个到服务器中 &#xff0c;再通过URL去访问以执行恶意代码。 1.2为什么存在文件上传漏…...

软件测试右移的意义与关键点

测试右移是将测试延伸到研发阶段之后的阶段&#xff0c;一般在产品发布上线后进行的测试&#xff0c;包括在线测试&#xff0c;在线监控和日志分析&#xff0c;甚至包括α测试、β测。测试右移描述的是软件测试工作重心的转变,而不是某项具体的测试技术。 测试右移的含义 测试…...

VLAN原理(Virtual LAN 虚拟局域网)

VLAN&#xff08;Virtual LAN 虚拟局域网&#xff09; 1、广播/广播域 2、广播的危害&#xff1a;增加网络/终端负担&#xff0c;传播病毒&#xff0c; 3、如何控制广播&#xff1f;&#xff1f; ​ 控制广播隔离广播域 ​ 路由器物理隔离广播 ​ 路由器隔离广播缺点&…...

YOLOv8 如何进行目标追踪

检测模型 YOLOv8n 追踪效果 YOLOv8 检测-追踪 分割模型 YOLOv8n-seg 追踪效果 YOLOv8 分割-追踪 关键点模型 YOLOv8n-pose 追踪效果 YOLOv8 检测-追踪 原理解析 目标检测是指在图像或视频中定位并识别出一个或多个目标物体的位置和类别。 目标检测算法通常会输出目标的边界框…...

【暑期每日一练】 day10

目录 选择题 &#xff08;1&#xff09; 解析&#xff1a; &#xff08;2&#xff09; 解析&#xff1a; &#xff08;3&#xff09; 解析&#xff1a; &#xff08;4&#xff09; 解析&#xff1a; &#xff08;5&#xff09; 解析&#xff1a; 编程题 题一 …...

antd中的Cascader级联选择框怎么清空重置React

项目场景&#xff1a; React项目&#xff0c;使用antd中的Cascader级联选择框 问题描述&#xff1a; 通过其他按钮无法重置选择框中的项 原因分析&#xff1a;&#xff08;对应解决办法一和二&#xff09; 1、级联选择框的数据默认是根据options绑定的数组中的value值来进行…...

复现YOLOv5改进最新MPDIoU:有效和准确的边界盒回归的损失,打败G/E/CIoU,效果明显!!!

MPDIoU: A Loss for Efficient and Accurate Bounding Box Regression 论文简介MPDIoU核心设计思路论文方法实验部分加入YOLOv5代码论文地址:https://arxiv.org/pdf/2307.07662.pdf 论文简介 边界盒回归(Bounding box regression, BBR)广泛应用于目标检测和实例分割,是目标…...

低代码在数智化时代中的应用

随着科技的发展&#xff0c;企业从生产到经营中海量的数据持续被记录。数据是望远镜&#xff0c;发现完全不同的商业边界&#xff1b;数据是显微镜&#xff0c;判断肉眼察觉不到的消费和生活行为&#xff1b;数据是雷达&#xff0c;帮助企业提前预测未来的行为。 而通过人工智…...

应用层协议——http

文章目录 1. HTTP协议1.1 认识URL1.2 urlencode和urldecode1.3 HTTP协议格式1.3.1 HTTP请求1.3.2 HTTP响应1.3.3 外网测试1.3.4 添加html文件1.3.5 HTTP常见Header1.3.6 GET和POST 1.4 HTTP的状态码1.4.1 301和3021.4.2 代码实现 1.5 Cookie1.5.1 代码验证1.5.2 Cookiesession …...

element-tree-line el-tree 添加结构线 添加虚线

概览&#xff1a;给element组件添加上虚线&#xff0c;通过使用插件element-tree-line 参考连接&#xff1a; 参考别人的博客 安装插件&#xff1a; # npm npm install element-tree-line -S # yarn yarn add element-tree-line -S main.js全局注册引入插件&#xff1a; imp…...

【Lua学习笔记】Lua进阶——函数和闭包

文章目录 函数函数嵌套闭包Closures可变函数函数重载 函数 函数嵌套 function A()print("这里是函数A")return function ()print("返回函数不要起名")end end B A() B()输出&#xff1a; 这里是函数A 返回函数不要起名使用函数嵌套的用法&#xff0c;我…...

大学生竞赛管理系统springboot比赛报名信息java jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 大学生竞赛管理系统springboot 系统有3权限&#xff…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...