ElementPlus修改表头及表格样式外加去除表格边框_element plus header-cell-style

效果图如下

 <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>
1
2
3
4
5
6
7
8
9
10
11

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

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

未作处理

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

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

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

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