elementui 卡片展示数据
时间: 2023-10-11 20:09:54 浏览: 242
显示卡片系统
你可以使用 ElementUI 的 Card 组件来展示数据。以下是一个基本的例子:
```html
<el-card>
<div slot="header" class="clearfix">
<span>Card Title</span>
</div>
<div>
<p>Card Content</p>
</div>
</el-card>
```
你可以在 Card 组件中嵌套其他 ElementUI 组件,以展示更复杂的数据。例如,你可以在 Card 中使用 Table 组件来展示表格数据:
```html
<el-card>
<div slot="header" class="clearfix">
<span>Card Title</span>
</div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</el-card>
```
在上面的例子中,`tableData` 是一个包含表格数据的数组。你可以将其传递给 Table 组件的 `data` 属性,以展示表格数据。
阅读全文