el-card 里数据怎么排版
时间: 2024-04-29 22:04:48 浏览: 6
在 `el-card` 组件中,数据的排版可以通过使用不同的布局方式来实现。以下是一些常用的布局方式:
1. 使用 `flex` 布局:通过在 `el-card` 的子元素上设置 `display: flex` 和 `align-items: center` 等样式来实现数据的排版。
```html
<template>
<el-card>
<div style="display: flex; align-items: center">
<img src="avatar.jpg" alt="Avatar" style="width: 50px; height: 50px; border-radius: 50%">
<div style="margin-left: 10px">
<h3>John Doe</h3>
<p>Software Engineer</p>
</div>
</div>
</el-card>
</template>
```
2. 使用表格布局:通过使用 `el-table` 组件来实现数据的排版。
```html
<template>
<el-card>
<el-table :data="tableData" border>
<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>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John Doe', age: 30, address: 'New York' },
{ name: 'Jane Smith', age: 25, address: 'London' },
{ name: 'Bob Lee', age: 40, address: 'Tokyo' }
]
}
}
}
</script>
```
3. 使用 `flexbox` 布局:通过在 `el-card` 的子元素上设置 `display: flexbox` 和 `flex-wrap: wrap` 等样式来实现数据的排版。
```html
<template>
<el-card>
<div style="display: flexbox; flex-wrap: wrap">
<div style="width: 50%; padding: 10px">
<h3>John Doe</h3>
<p>Software Engineer</p>
</div>
<div style="width: 50%; padding: 10px">
<img src="avatar.jpg" alt="Avatar" style="width: 100%">
</div>
</div>
</el-card>
</template>
```
以上是一些常用的数据排版方式,你可以根据具体需求选择相应的布局方式。