element表格去除border边框同时有竖直方向的边框

news2024/12/23 20:11:08

为什么要去除boder边框,原因是boder的边框与页面的背景色相同,然后显得表格内凹了一个像素

要实现的需求是表格去除border边框同时添加竖直方向的边框
表格内凹
但是如果不添加boder属性,表格则没有竖直方向的边框
表格带边框
这种下无内凹,但是显得不规范
无内凹
最终想要实现的效果是
取消左右两边的边框

第一个思路

第一个思路是找到表格的boder,然后通过样式穿透去修改boder的颜色,这个思路有两个行不通的障碍,第一是如果边框设为白色,但表格的横线不会往边框延申第二是只能找到表格左边的边框伪类,找不到右边的伪类

左边边框伪类
伪类
一开始我还以为有.el-table__border-right-patch,但发现并没有

所以通过样式穿透只能修改左边的,display:none可隐藏左边的边框

第二种思路

第二种思路是通过表格的回调方法去给表头和表单的方格cell 添加右边框,同时最后一列取消右边框
当然也可以通过 添加左边框,但是第一列取消掉左边框
表头回调:
表头回调
表格回调:
表格回调
添加回调方法
添加回调方法
回调函数代码:

const headerCellStyle = ({columnIndex}) => {
//这里的2是代表最后一列
		if (columnIndex !== 2) {
			return {
				borderRight: "1px #eee solid",
			}
		}
	}
const cellStyle = ({columnIndex}) => {
		if (columnIndex !== 2) {
			return {
				borderRight: "1px #eee solid"
			}
		}
	}

实现效果:左右两边无边框,不会显得内凹,同时内部有竖线
无内凹

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

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

相关文章

ICV:上半年全球市场规模达20.4亿美元,超声波雷达仍具有竞争力!

全球前沿科技咨询机构ICV近期发布了全球车载超声波雷达的市场分析报告。ICV在报告中指出,在当前的自动驾驶发展阶段,超声波雷达在一众传感器中仍具有较强竞争力,其中APA类型超声波雷达的渗透率上升空间很大。2022年上半年中国的超声波雷达市场…

kettle - get请求

文章目录前言kettle - get请求前言 如果您觉得有用的话,记得给博主点个赞,评论,收藏一键三连啊,写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差,实在白嫖的话,那欢迎常来啊!!! kettle - get请…

学Python爬虫好找工作吗?要学到什么程度?

Python的火爆,同时也带动了Python爬虫岗位的的极大需求。可能有些人想问了,学Python爬虫真的好找工作吗?要学到什么程度?根据各大招聘网站的数据反馈,目前市场上对Python爬虫工程师的需求比较大。但是这并不意味着学习…

【Redis技术专题】「高可用技术基础」一同分析一下Redis高可用的“基石”之主从架构的本质原理解析

📕技术箴言 当心中有更高的山峰去攀登,就不会在意脚下的泥沼。 📕前提概要 Redis高可用的方案包括:持久化、主从复制(及读写分离)、哨兵和集群(Cluster)。 📕&#x1f…

分布式注册服务中心etcd在云原生引擎中的实践

作者:王雷 etcd是什么 etcd是云原生架构中重要的基础组件,由CNCF孵化托管。ETCD是用于共享配置和服务发现的分布式,一致性的KV存储系统,是CoreOS公司发起的一个开源项目,授权协议为Apache。etcd 基于Go语言实现&…

vivo 推荐业务 x DeepRec:全链路优化实践

作者: vivo - 人工智能推荐团队:何鑫、李恒、周健、黄金宝 背景 vivo 人工智能推荐算法团队在深耕业务同时,也在积极探索适用于搜索/广告/推荐大规模性稀疏性算法训练框架。分别探索了 tensornet/XDL/tfra 等框架及组件,这些框…

docker高级篇第二章-分布式存储之实战案例:主从容错切换迁移案例

在上一篇,学会了3主3从的Redis集群搭建。那么接下来,我们就来学习Redis集群主从容错切换迁移案例 本次案例从模拟两个场景 1:数据读写存储 a:一个新key数据来了,是否会按照预设的进入槽中?集群是否生效 …

黄病毒蛋白酶底物,113866-14-1,Boc-GRR-AMC

Boc-GRR-AMC被拟南芥的II型半胱氨酸蛋白酶Atmc4和Atmc9切割。Boc GRR AMC的储备溶液最好在DMSO中制备。 A substrate for flavivirus proteases such as West Nile virus protease, yellow fever virus NS3 protease, and dengue virus NS2B-NS3 protease.Boc-GRR-AMC is cleav…

JSP ssh排放登记管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 JSP ssh 排放登记管理系统是一套完善的web设计系统(系统采用ssh框架进行设计开发),对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0…

抗疫逆行者网页作业 感动人物HTML网页代码成品 网页作业带JS下拉菜单 最美逆行者网页模板 致敬疫情感动人物网页设计制作

🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (10…

洛谷P1319 压缩技术

压缩技术 题目描述 设某汉字由 NNN \times NNN 的 0\texttt 00 和 1\texttt 11 的点阵图案组成。 我们依照以下规则生成压缩码。连续一组数值:从汉字点阵图案的第一行第一个符号开始计算,按书写顺序从左到右,由上至下。第一个数表示连续有…

使用go语言开发自动化脚本 - 一键定场、抢购、预约、捡漏

原文地址:码农在新加坡的个人博客 背景 不知道大家有没有这种经历,想要抢课,定场,发现抢不到,想要捡漏,又要随时刷,今天我就来讲一下我是怎么使用Go语言开发自动化脚本来解决定场,抢…

圆梦腾讯之路6面阿里、5面字节、4面腾讯,终斩腾讯Offer

6年前,BAT冲到了风口浪尖,美国上市的阿里成为中国体量最大的互联网公司,腾讯借助微信成为移动互联网的霸主,外企开始撤离中国,国企的光环也慢慢褪去。 到了近年,应届毕业生心中最炙手可热的公司换成了TMD及…

数据结构刷题训练营3

开启蓝桥杯备战计划,每日练习算法一题!!坚持下去,想必下一年的蓝桥杯将会有你!!笔者是在力扣上面进行的刷题!!由于是第一次刷题!找到的题目也不咋样!所以&…

[附源码]计算机毕业设计Python工程施工多层级管理架构(程序+源码+LW文档)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等…

逃离美国,跨越8000公里远程办公,他开发了世界上最强的虚拟机

“从前”有一门编程语言叫Smalltalk,它是世界上第一个纯粹的面向对象编程语言。 Smalltalk有很多忠实拥趸,在Java崛起之前,它独自可以抗衡C。 著名的《设计模式》一书,其中的代码示例就是C和Smalltalk。 但是Smalltalk运行速度太慢…

缓存架构,减少不必要的计算

前言: 互联网应用的主要挑战就是在高并发情况下,大量的用户请求到达应用系统服务器,造成巨大的计算压力。互联网应用的核心解决思路就是采用分布式架构,提供更多的服务器,从而提供更多的计算的资源,应对高…

VUE3-创建项目《一》

本案例使用vue3进行学习记录,和vue2有些是通用的。 1.需要了解HTML,CSS,JavaScript。 2.了解Node和NPM,node是vue的开发环境,npm是依赖管理包,npm就和Java的maven一样,和c#的NuGet一样&#x…

mac 微信备份到外接硬盘方案(软链接)

mac版本微信中并没有指定备份路径的功能,备份的聊天记录文件也在一个很难找的位置。对于使用256g硬盘的mac的用户,微信聊天记录动辄十几G、几十G的大小,会造成非常严重的硬盘容量恐慌。所以把微信备份文件迁移到外置硬盘是一件非常有意义的工…

实景三维数据汇交、接缝处理难?用网格大师轻松搞定!

为满足全国城市化、智慧化建设发展,实景三维建设进程加快,建设成果日渐增多,随之而来的数据汇交需求增大。然而在实际数据汇交过程中,不仅需要考虑到模型能否直接融合与替换的问题,还将面临几何接缝、色彩不均等问题。…