效果图如下

在这里插入图片描述

 <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,这样不会影响到其他的样式

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐