elementplus的el-card组件左上角添加标题

要在 Element Plus 的 el-card 组件左上角添加标题，可以利用 el-card 提供的 header 插槽来进行自定义。下面是一个示例代码片段：

Html

<template>
  <el-card>
    <!-- 使用 header 插槽添加自定义标题 -->
    <template #header>
      <span class="card-header-title">标题</span>
    </template>

    <!-- 这里是卡片内容 -->
    <div>卡片主体内容...</div>
  </el-card>
</template>

<style scoped>
/* 可以根据需要自定义标题样式 */
.card-header-title {
  font-weight: bold;
  color: #333;
}
</style>

在这个例子中，<template #header> 是 el-card 的命名插槽，用于替换卡片头部的内容。你可以在其中放置任何 Vue 模板内容，这里放置了一个 标签作为标题，并通过 CSS 对其样式进行调整。

如果你还需要更多的结构化控制，比如添加图标或其他元素，可以进一步扩展这个模板内容。例如：

Html

<template #header>
  <div class="card-header-container">
    <i class="el-icon-star-on card-header-icon"></i>
    <span class="card-header-title">标题</span>
  </div>
</template>

这样就在卡片左上角添加了一个标题及一个图标。记得引入对应的 Element Plus 图标样式。