iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何解决ElementPlus的el-table底白线问题
  • 629
分享到

如何解决ElementPlus的el-table底白线问题

ElementPlusel-tableel-table底白线ElementPlusel-table底白线 2022-12-29 18:12:35 629人浏览 独家记忆
摘要

目录ElementPlus的el-table底白线问题Element Plus el-table的样式调整总结ElementPlus的el-table底白线问题 自己在使用el-ta

ElementPlus的el-table底白线问题

自己在使用el-table的时候,想去掉table的线和底透明。

透明做到了,底部总有白线,网上找到很多文章,试了很多方法,都不解决。

最后看CSS,发现通过以下办法可以解决,记录下来备忘。

:deep(.el-table__inner-wrapper::before) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    z-index: 3;
}

Element Plus el-table的样式调整

网上查如何调整el-table表格内部样式,一大堆资料说直接用css调整原生样式,来回捣鼓半天还是不满意,而且版不同样式引用还不一定有效果,最后看官方文端摸索了一下调整方法,记录如下供大家参考:

  • 调整表头样式,直接在el-table内部绑定header-cell-style,接收的数据格式为对象
  • cell-style调整每一列的样式,接受的数据格式同样为对象,当然也可以使用函数动态变化返回值。
  • el-table-column中设置 align=“center”,让单元格内容居中,不需要其他多余设置
  • 其他更多效果可参考官方文档
// vue3 组件为elementplus
<el-table
      :data="tableData"
      :header-cell-style="{
        'text-align': 'center',
        'font-size': '18px',
        'background': '#162556 !important',
        'color': '#ffffff',
        'border': 'none !important'
      }"
      :cell-style=changeCellStyle
      >
          <el-table-column align="center" prop="name" label="单位名称"></el-table-column>
      <el-table-column align="center" prop="value" label="数值大小%"></el-table-column>
      </el-table>
<script setup>
 // 动态调整样式
 function changeCellStyle(row) {
  // 可自行输出row查看样式
  const styleObject = {
    'background': '#090e2e !important',
    'color': '#ffffff', 
    'border-bottom': '2px solid #173D91',
    'font-size' : '18px',
    'cursor': 'pointer'
  }
  if(row.column.label == 'xxxx') {
    styleObject.color = '#00f1ed'
  }else{
    if(row.row.value < warningValue) {
      styleObject.color = 'red'
    }
  }
  return styleObject
}
</script>

效果图:

我们发现底部还有白线,通过网页控制台选中查看,发现还是有内部样式捣乱。

此时果断用deep深度选择器对其进行修改,这里我使用的是scss,不同的语言,deep深度选择器的使用可能有差别。

:deep(.el-table tr) {
  background-color: #162556;
}
:deep(.el-table__inner-wrapper::before) {
  background-color: #173d91;
}

修改后的样式:

后续:其实这个表格还是有不完美的地方左右两边的线无法清除掉。更奇怪的是,白色背景下,左右两边的线是不存在的,可是换一个深色背景,左右两边的线却显示出来,期待后续能够解决这个问题。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 如何解决ElementPlus的el-table底白线问题

本文链接: https://www.lsjlt.com/news/176250.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何解决ElementPlus的el-table底白线问题
    目录ElementPlus的el-table底白线问题Element Plus el-table的样式调整总结ElementPlus的el-table底白线问题 自己在使用el-ta...
    99+
    2022-12-29
    ElementPlus el-table el-table底白线 ElementPlus el-table底白线
  • 如何解决Img图片底部空白缝隙问题
    这篇文章给大家分享的是有关如何解决Img图片底部空白缝隙问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。最近做项目发现引用图片时下方总出现空白,情况如下图所示。<styl...
    99+
    2024-04-02
  • el-table嵌套el-popover处理卡顿如何解决
    本篇内容主要讲解“el-table嵌套el-popover处理卡顿如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“el-table嵌套el-popover处理卡顿如何解决”吧!罪魁祸首一个...
    99+
    2023-06-30
  • 如何解决html2canvas截图空白问题
    小编给大家分享一下如何解决html2canvas截图空白问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!资源下载地址插件下载地址:html2canvas下载地址使用方式项目使用的react组件开发方式。参照官方的说明文档...
    99+
    2023-06-09
  • 如何解决elementUI中Table表格问题
    这篇文章主要介绍了如何解决elementUI中Table表格问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.表格样式问题:混乱样式.p...
    99+
    2024-04-02
  • JS如何使用Bootstrap Table的冻结列功能彻底解决高度问题
    这篇文章主要为大家展示了“JS如何使用Bootstrap Table的冻结列功能彻底解决高度问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何使用Boo...
    99+
    2024-04-02
  • 关于Element-ui中el-table出现的表格错位问题解决
    目录前言1、数据更新后出现的错位问题1.1 直接在数据赋值后执行doLayout方法1.2在生命周期updated里执行doLayout方法2、浏览器窗口大小变化时出现的错...
    99+
    2024-04-02
  • 如何彻底解决sql注入问题
    彻底解决sql注入问题的方法:采用PreparedStatement进行预编译,sql语句在执行的过程中效率比Statement要高,例如:String sql = "select* from users wher...
    99+
    2024-04-02
  • 如何解决@Table注解无法使用的问题
    这篇文章主要介绍了如何解决@Table注解无法使用的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。@Table注解无法使用及报红在新建实体类时想直接序列化,遇到注解不起作...
    99+
    2023-06-26
  • 如何解决el-checkbox选中状态更改问题
    目录el-checkbox选中状态更改问题问题分析解决方式el-checkbox的基本使用,避坑指南使用el-checkbox勾选出现的问题勾选出现的问题el-checkbox选中状...
    99+
    2024-04-02
  • SpringBoot中到底该如何解决跨域问题
    目录前言1、跨域访问报错2、同源定义3、跨域问题如何解决?4、CORS原理5、SpringMVC中如何解决跨域问题?6、方案1:方法或者类上标注@CrossOrigin注解7、方案2...
    99+
    2024-04-02
  • 如何解决el-select数据过多懒加载问题
    这篇文章主要介绍如何解决el-select数据过多懒加载问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!el-select数据过多处理方式在日常项目中el-select组件的使用频...
    99+
    2024-04-02
  • BootStrap中如何解决Table隐藏后显示问题
    这篇文章主要介绍了BootStrap中如何解决Table隐藏后显示问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。开始的时候先把table...
    99+
    2024-04-02
  • vue的el-select绑定的值无法选中el-option问题及解决
    目录el-select绑定的值无法选中el-option问题vue el-select 2个下拉框联动时产生的无法选中值的bug问题描述el-select绑定的值无法选中el-opt...
    99+
    2024-04-02
  • 一个属性border-collapse如何解决Table的边框问题
    这期内容当中小编将会给大家带来有关一个属性border-collapse如何解决Table的边框问题,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 ...
    99+
    2024-04-02
  • 如何解决layui table返回值的多级嵌套问题
    这篇文章主要介绍了如何解决layui table返回值的多级嵌套问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。我在学习layui的过程中...
    99+
    2024-04-02
  • 如何解决xp桌面图标去掉蓝底的问题
    如何解决xp桌面图标去掉蓝底的问题,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。可以尝试以下几种方法(如果你在桌面进行了粘贴前三项无效,请你选用第四项修复): ...
    99+
    2023-06-14
  • 如何解决CSS3毛玻璃效果blur有白边的问题
    这篇文章给大家分享的是有关如何解决CSS3毛玻璃效果blur有白边的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。做一个登录页,全屏背景图毛玻璃效果,实现方法如下:HTML:...
    99+
    2024-04-02
  • Vue打包后页面出现空白的问题如何解决
    这篇文章主要介绍“Vue打包后页面出现空白的问题如何解决”,在日常操作中,相信很多人在Vue打包后页面出现空白的问题如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue打包后页面出现空白的问题如何解决...
    99+
    2023-06-20
  • 如何解决vue build打包之后首页白屏的问题
    这篇文章主要为大家展示了“如何解决vue build打包之后首页白屏的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决vue build打包之后首页白...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作