首先，确保你已经引入了 Element-React 的样式和脚本。可以通过以下方式之一来引入：
1. 使用 CDN：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 使用 npm 安装：
npm install element-ui
然后在你的 Vue 项目中引入并使用 Card 组件：
<template>
<div>
<el-card>
<div slot="header" class="clearfix">
<span>卡片标题</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div>
<!-- 卡片内容 -->
这是卡片的内容。
</div>
</el-card>
</div>
</template>
<script>
import { ElCard, ElButton } from 'element-ui';
export default {
components: {
ElCard,
ElButton,
},
};
</script>
在上面的例子中，我们使用了 ElCard 组件来创建卡片。通过在 <div slot="header"> 中添加标题和操作按钮，可以自定义卡片的标题和操作区域。卡片的内容可以直接放在 el-card 内。
你可以根据实际需求，通过设置不同的属性和插槽来自定义卡片的样式和内容。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5636/Element-React