elementUI列表中一行如何放置两行信息
时间: 2024-09-13 20:17:22 浏览: 26
Element UI 是一个基于 Vue 2.0 的桌面端组件库,它提供了一系列可复用的组件以快速构建优雅的界面。如果你想在一个列表项中显示两行信息,通常会使用 `el-row` 和 `el-col` 组件来实现响应式的栅格布局。
以下是一个简单的例子,演示如何在一个列表项中放置两行信息:
```html
<template>
<el-list>
<el-list-item v-for="item in listData" :key="item.id">
<!-- 使用row和col布局来实现两行信息 -->
<el-row type="flex" class="demo">
<el-col :span="12">
<!-- 第一行信息 -->
<div>{{ item.firstLine }}</div>
</el-col>
<el-col :span="12">
<!-- 第二行信息 -->
<div>{{ item.secondLine }}</div>
</el-col>
</el-row>
</el-list-item>
</el-list>
</template>
<script>
export default {
data() {
return {
listData: [
{ id: 1, firstLine: '第一行信息', secondLine: '第二行信息' },
// ...其他数据项
]
};
}
};
</script>
<style>
/* 用于演示的样式 */
.demo {
margin-bottom: 10px;
}
</style>
```
在这个例子中,我们使用了 `el-row` 作为行容器,`el-col` 作为列容器。通过 `:span="12"` 设置每个 `el-col` 占用12个栅格宽度,这样两个 `el-col` 就会各自占据一半的空间,从而在一行中展示两行信息。
阅读全文