element-card用法总结

最新推荐文章于 2025-09-21 17:43:31 发布

原创最新推荐文章于 2025-09-21 17:43:31 发布 · 5.6w 阅读

18 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

4 篇文章

订阅专栏

博客针对利用el-card实现通知栏功能总结细节问题。一是可按需修改el-card__header样式，默认无背景色；二是列表项相关，通知栏宜用有序列表，要设置恰当行间距和首行缩进，内容过多时需自动换行，且列表项循环应放在单独div标签下。

大神请移步，菜鸟可以参考一下。

在项目中，利用el-card实现了一个类似通知栏的功能，顺便总结了一些细节问题。老规矩，先上代码：

	<el-card>
        <div slot="header">
          <span>用户须知</span>
          <el-button style="float: right" type="warning" @click="editShow(infos)" size="mini" v-if="user.privilege===10">修改</el-button>
          <el-button style="float: right;margin-right: 20px" type="primary" @click="addVisible = true" size="mini" v-if="user.privilege===10">添加</el-button>
        </div>
        <div style="margin-right: 15px; word-break: break-all">
          <ol type="1">
            <div v-for="info in infos" :key="info" class="paragraph_indent">
              <li>{{info}}</li>
            </div>
          </ol>
        </div>
      </el-card>

1、修改el-card__header 样式

.el-card__header {
    background-color: yellowgreen;
  }

默认情况下，el-card__header没有背景颜色，用户可以根据需要进行设置

2、列表项相关

作为一个通知栏，最好能够是一个有序的列表，这样比较直观，同时，每一个单项直接需要设置恰当的行间距，首行空几个像素等。当一行的内容过多时，注意换行，

设置自动换行

 <div style="margin-right: 15px; word-break: break-all">
 省略内容。。。
 </div>

有序列表

	<ol type="1">
       <div v-for="info in infos" :key="info" class="paragraph_indent">
          <li>{{info}}</li>
        </div>
    </ol>

注意，列表项的循环放在一个单独的div的标签之下，v-for语句不要放在ol标签属性中，如果是无序列表，效果实现是相同的，但是如果是有序列表，生成的序号是相同的。

.paragraph_indent {
    text-indent: 20px;
    margin-top: 10px;
  }

上面样式主要是控制列表项的行间距及首行缩进