ElementPlus修改表头及表格样式外加去除表格边框

原创已于 2023-07-25 11:13:59 修改 · 3.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-07-25 11:12:39 首次发布

文章展示了如何使用CSS自定义ElementPlus表格的边框线颜色，通过设置.tableMain类下的.el-table样式，改变--el-table-border-color属性实现边框线与背景融合，从而达到消除边框线视觉效果。作者建议在表格上一级盒子样式下编写CSS，避免影响其他样式。

效果图如下

在这里插入图片描述

 <div class="tableMain">
        <el-table :data="tableData" style="width: 100%;height: 100%;" :header-cell-style="{
          'background': '#24826c !important',
          'color': '#ffffff',
          'border': 'none !important'
        }" :row-style="{ 'background': '#353535 !important', 'color': '#ffffff' }">
          <el-table-column prop="date" label="设备名称" />
          <el-table-column prop="name" label="设备型号" />
    
        </el-table>
      </div>

其中header-cell-style为更改头部样式的
row-style为表格主体的样式修改
我这里只需要单独设置一个样式，想要别的效果请参考elementPlus官方文档

表格中的表格边框线如何处理？

未作处理
在这里插入图片描述

这里我并没有直接清除掉下边框线而是让这些边框线的color变为了和背景一样的颜色，一样达到了边框线消失的情景
下面为示例代码

 .tableMain {
    .el-table {
      --el-table-border-color: rgb(53, 53, 53) !important;
    }

一行代码直接搞定，百度了一堆对于我来说都没有效果，所以自己用浏览器调了一下。这行代码添加完以后效果就和最开始展示的那个图一样了

注：最好在table的上一级盒子样式下写css，这样不会影响到其他的样式