修改el-card的header的背景颜色

简单点了2023-09-17 11:43

1.修改默认样式

好处是当前页面的所有的el-card都会变化

页面卡片：

复制代码

 <el-card class="box-card" >
    <div slot="header" class="clearfix">
      <span>卡片名称</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    <div v-for="o in 4" :key="o" class="text item">
      {{'列表内容 ' + o }}
    </div>
  </el-card>

页面css：

复制代码

.box-card .el-card__header {
  background-color: #409EFF;
  color: #fff;
}

2.采用自定义的方式

对body和整个card设置不同的样式就能达到相同的效果。

下面是参考代码

复制代码

  <el-card class="box-card" :body-style="{backgroundColor: '#fff' }" style=" background-color: #409eff;">
    <div slot="header" class="clearfix" >
      <span>卡片名称</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    <div v-for="o in 4" :key="o" class="text item">
      {{'列表内容 ' + o }}
    </div>
  </el-card>