Vue+el-table 修改表格单元格横线边框颜色及表格空数据时边框颜色

蓝胖子的多啦A梦

已于 2024-04-10 14:30:47 修改

阅读量1.6k

点赞数 4

文章标签： vue.js 前端 javascript el-table边框颜色修改

于 2024-04-10 10:45:23 首次发布

本文链接：https://blog.csdn.net/Maxueyingying/article/details/137586397

版权

文章讲述了如何在CSS中针对`.el-tableth`和`.el-table__cell`修改边框样式，包括删除边框线和处理表格空数据时的边框颜色。作者提供了具体的代码示例以实现透明背景和无边框的效果。

摘要由CSDN通过智能技术生成

需求

在这里插入图片描述

目前

在这里插入图片描述

找到对应的css样式进行修改

修改后

在这里插入图片描述

css样式

  >>>.el-table th.el-table__cell.is-leaf {
        border-bottom: 1px solid #444B5F !important;
  }

  >>>.el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        border-bottom: 1px solid #444B5F !important;
 }

第二个问题

修改表格空数据时，边框颜色

在这里插入图片描述

css样式

 >>>.el-table::before {
        background-color: transparent !important; 
        // transparent 为默认值，透明背景颜色，因为我的需求是需要将边框线去掉，所以给了默认值，
        //大家可以根据自己的需求给颜色值噢
    }