el-table的border属性失效问题解决方案

目录

问题:

 使用的代码:

官方文档的说明:

 可能的问题所在:

关于使用了作用域插槽:

a.自定义内容的样式覆盖:

b.表格结构的改变:

解决方案:

通过css样式解决:

下面为常用的child选择器举例:

解决效果:


问题:

如图所示,下面是el-table使用了border属性后没有效果

 使用的代码:

看了下官方文档,并且检查了下自己写的并没有错误

<el-table height="100%"width="100%" borderresizablev-loading="loading":data="tableData"@selection-change="tableSelect" >

官方文档的说明:

heightTable 的高度,默认为自动高度。如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则这个高度会设置为 Table 的 style.height 的值,Table 的高度会受控于外部样式。string/number
max-heightTable 的最大高度。合法的值为数字或者单位为 px 的高度。string/number
stripe是否为斑马纹 tablebooleanfalse
border是否带有纵向边框booleanfalse
sizeTable 的尺寸stringmedium / small / mini
fit列的宽度是否自撑开booleantrue
show-header是否显示表头booleantrue

 可能的问题所在:

  1. CSS 样式覆盖:你的项目中可能有其他的 CSS 样式覆盖了 el-table 的边框样式。检查你的 CSS 文件,确保没有其他样式影响到了 el-table 或其子元素的边框。

  2. Element UI 版本:确保你使用的 Element UI 版本支持 border 属性的。虽然 border 属性在 Element UI 的早期版本中就已经存在,但最好还是检查一下文档或更新到最新版本。

  3. 组件使用方式:确保你正确地使用了 border 属性。border 属性应该直接添加到 el-table 标签上

    <el-table :data="tableData" border>  <!-- 表格列定义 -->  
    </el-table>
  4. 浏览器兼容性:虽然这种情况不太常见,但也有可能是浏览器兼容性问题导致的。尝试在不同的浏览器或浏览器版本中查看你的页面,看看问题是否仍然存在
  5. 使用了作用域插槽:el-table 使用作用域插槽 (scoped slot) 后,border 属性没有效果的原因通常与插槽内容渲染的方式有关。在 Element UI 中,el-table 组件的边框样式是通过在表格元素(通常是 tabletheadtbodytrtd 等)添加特定的 CSS 类实现的

关于使用了作用域插槽:

a.自定义内容的样式覆盖

当你在作用域插槽中定义列内容时,你可能不小心添加了一些 CSS 样式,这些样式可能覆盖了 el-table 组件默认的边框样式。

b.表格结构的改变

作用域插槽允许你完全自定义列的内容,这可能导致表格的 HTML 结构发生变化。如果这种变化破坏了 Element UI 用来添加边框的 HTML 结构,那么边框样式可能不会按预期显示。

解决方案:

通过css样式解决:

我这里直接写到app.vue里面,你也可以写到全局样式里,或者单个页面。

如果你在使用单文件组件(.vue 文件),确保你的样式没有被 scoped 或 module 限定。scoped 或 module 样式只会应用于当前组件,不会影响到子组件。如果 el-table 的边框样式被限定在当前组件内,它可能不会被应用到 el-table 的子元素上。

颜色这些自定义或者自己取色

//加在app.vue
.el-table{/* 表头增加border */thead th:not(.is-hidden) {border-left: 1px solid #ebeef5 ;}/* 表单增加border */.el-table__row {td:not(.is-hidden) {border-left: 1px solid #e4e7ec ;}}}

 如果使用单页面的,可能会没有效果,你需要加上::v-deep 深度作用,或者加上 !important,

使用!important的话需要谨慎,优先级最高了,需要确保不会影响其他的(如果你有其他修改当前的样式)

::v-deep 
//或者!important
//加在当前页面css
.el-table{//表头::v-deep thead th:not(.is-hidden) {border-left: 1px solid #ebeef5;}//表单::v-deep .el-table__row {td:not(.is-hidden) {border-left: 1px solid #e4e7ec;}}
}

 假如你需要修改表头或者表单的某一项的border,可以在上面的样式基础上加上child选择器

下面为常用的child选择器举例:

//第n个 n为int类型
:nth-child(n)
//偶数
:nth-child(2n)
//奇数
:nth-child(2n-1)
//选择前5个元素
:nth-child(-n+5){}
//从第5个开始
:nth-child(n+5){}
//限制范围 选择第5个到第20个
:nth-child(-n+5):nth-child(n+20){}
//倒数第n个
:nth-last-child(n) 

解决效果:

 成功解决,希望有帮助,谢谢。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聚酰亚胺PI材料难于粘接,用什么胶水粘接?那么让我们先一步步的从认识它开始(一)

聚酰亚胺PI的基本概念 聚酰亚胺&#xff08;Polyimide&#xff0c;简称PI&#xff09;是一种重要的高性能聚合物材料。是指主链上含有酰亚胺环的一类聚合物&#xff0c;是综合性能最佳的有机高分子材料之一。它具有最高的阻燃等级&#xff08;UL-94&#xff09;&#xff0c;以及…

Editor.md-编辑器

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

学生时期学习资源同步-1 第一学期结业考试题8

原创作者&#xff1a;田超凡&#xff08;程序员田宝宝&#xff09; 版权所有&#xff0c;引用请注明原作者&#xff0c;严禁复制转载

云服务器2核4G配置,阿里云和腾讯云哪个便宜?性能更好?

租用2核4G服务器费用多少&#xff1f;2核4G云服务器多少钱一年&#xff1f;1个月费用多少&#xff1f;阿里云2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年&#xff1b;腾讯云轻量2核4G服务器5M带宽165元一年、252元15个月、540元三…

搭建谷歌Gemini

前言 Gemini是Google AI于2023年发布的大型语言模型&#xff0c;拥有强大的文本生成、理解和转换能力。它基于Transformer模型架构&#xff0c;并使用了大量文本和代码数据进行训练。Gemini可以执行多种任务&#xff0c;包括&#xff1a; 生成文本&#xff1a;可以生成各种类…

Qt/QML编程之路:基于QWidget编程及各种2D/3D/PIC绘制的示例(45)

关于使用GWidget,这里有一个示例,看了之后很多图形绘制,控件使用,及最基本的QWidget编程都比较清楚了。ui的绘制: 运行后的界面如 工程中有非常丰富的关于各种图形的绘制,比如上图中circle,还有image。有下面一段readme的说明: # EasyQPainter Various operation pra…

css超出部分显示省略号

目录 前言 一、CSS单行实现 二、CSS多行实现&#xff08;CSS3出的&#xff0c;兼容性需要注意&#xff09; 三、微信小程序超过2行出现省略号实现 四、JavaScript脚本实现 前言 CSS文本溢出就显示省略号&#xff0c;就是在样式中指定了盒子的宽度与高度,有可能出现某些内…

“antd“: Unknown word.cSpell

你遇到的问题是 VS Code 的 Code Spell Checker 插件在检查拼写时&#xff0c;将 "antd" 标记为未知单词。"antd" 是 Ant Design 的缩写&#xff0c;是一个流行的 React UI 库&#xff0c;不是一个英语单词&#xff0c;所以 Spell Checker 会将其标记为错误…

Linux的一些常用指令

一、文件中 r w x - 的含义 r&#xff08;read&#xff09;是只读权限&#xff0c; w&#xff08;write&#xff09;是写的权限&#xff0c; x&#xff08;execute&#xff09;是可执行权限&#xff0c; -是没有任何权限。 二、一些指令 # 解压压缩包 tar [-zxvf] 压缩包名…

Selenium 学习(0.20)——软件测试之单元测试

我又&#xff08;浪完&#xff09;回来了…… 很久没有学习了&#xff0c;今天忙完终于想起来学习了。没有学习的这段时间&#xff0c;主要是请了两个事假&#xff08;5工作日和10工作日&#xff09;放了个年假&#xff08;13天&#xff09;&#xff0c;然后就到现在了。 看了下…

hadoop报错:HADOOP_HOME and hadoop.home.dir are unset. 解决方法

参考&#xff1a;https://blog.csdn.net/weixin_45735242/article/details/120579387 解决方法 1.下载apache-hadoop-3.1.0-winutils-master 官网下载地址&#xff1a; https://github.com/s911415/apache-hadoop-3.1.0-winutils win配置系统环境&#xff1a; 然后重启idea…

Java优先级队列(堆)

&#x1f435;本篇文章将对优先级队列&#xff08;堆&#xff09;的相关知识进行讲解 一、优先级队列 队列是一种“先入先出”的数据结构&#xff0c;但有时操作的数据带有优先级&#xff0c;需要优先处理&#xff0c;这时普通的队列就不能满足需求。比如&#xff1a;在排队取…

(vue)Module Error (from ./node_modules/eslint-loader/index.js)

(vue)Module Error (from ./node_modules/eslint-loader/index.js) 参考&#xff1a;解决参考

mac安全干净卸载Anaconda3

使用which python显示当前使用的是/Users/username/anaconda3/bin/python 现在想卸载Anaconda&#xff0c;恢复使用mac系统自带的Python 删除隐藏文件目录 rm -rf ~/.anaconda修改~/.bash_profile文件&#xff0c;将anaconda相关删除 也有可能不是~/.bash_profile而是~/.zs…

现代DevOps如何改变软件开发格局

在软件开发的早期&#xff0c;该过程通常是开发人员编写代码&#xff0c;再将其交给质量保证&#xff08;QA&#xff09;进行测试。这种瀑布开发方法可能会导致质量问题和延迟&#xff0c;因为问题是在周期后期发现的。 一、了解DevOps和测试左移 DevOps是Development和Opera…

OCR-free相关论文梳理

引言 通用文档理解&#xff0c;是OCR任务的终极目标。现阶段的OCR各种垂类任务都是通用文档理解任务的子集。这感觉就像我们一下子做不到通用文档理解&#xff0c;退而求其次&#xff0c;先做各种垂类任务。 现阶段&#xff0c;Transformer技术的发展&#xff0c;让通用文档理…

Android App冷启动耗时优化

Android应用启动过程 Android应用启动过程&#xff0c;主要包含app::onCreate及执行前的Application阶段及Activity::onCreate执行之后的Activity阶段&#xff0c;以及两个阶段之间的间隙handleMessage阶段和最终页面渲染上屏完成前数据加载阶段四个区间组成。 具体来看&#x…

SpringBlade error/list SQL 注入漏洞复现

0x01 产品简介 SpringBlade 是一个由商业级项目升级优化而来的 SpringCloud 分布式微服务架构、SpringBoot 单体式微服务架构并存的综合型项目。 0x02 漏洞概述 SpringBlade 框架后台 /api/blade-log/error/list路径存在SQL注入漏洞,攻击者除了可以利用 SQL 注入漏洞获取数…

【SpringBoot】自定义工具类实现Excel数据新建表存入MySQL数据库

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》《项目实战》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 …

SpringCloudAlibaba 网关gateway整合sentinel日志默认路径修改

SpringCloudAlibaba 网关gateway整合sentinel 实现网关限流熔断 问题提出 今天运维突然告诉我 在服务器上内存满了 原因是nacos日志高达3G,然后将日志文件发给我看了一下之后才发现是gateway整合sentinel使用了默认日志地址导致日志生成地址直接存在与根路径下而且一下存在多…