一.子组件
<template>
<div class="historyWrap">
<div class="item" v-for="item in listArr" :key="item.id">
<div class="top">
<div class="img">
<el-avatar :size="50" :src="item.imgUrl"></el-avatar>
</div>
<div class="text">
<div>{{ item.name }}</div>
<div>{{ item.date }}</div>
</div>
</div>
<div class="bottom">
{{ item.desc }}
</div>
<el-divider></el-divider>
</div>
</div>
</template>
<script>
export default {
props: {
listArr: {
type: Array,
default: [],
},
},
};
</script>
<style lang="less" scoped>
.historyWrap {
.item {
display: flex;
flex-direction: column;
align-items: flex-start;
.top {
display: flex;
}
.text{
text-align: left;
margin-left: 15px;
}
.bottom {
margin-left: 65px;
text-align: left;
}
}
}
</style>
二.应用组件
<template>
<div>
<el-card>
<history-record :listArr="listArr"></history-record>
</el-card>
</div>
</template>
<script>
import HistoryRecord from "@/components/HistoryRecord.vue";
export default {
components: {
HistoryRecord,
},
data() {
return {
listArr: [
{
id: 1,
name: "李四的零食店",
desc: "商家进行了发货",
date: "2022-10-10 10:00:00",
imgUrl:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
},
{
id: 2,
name: "张三",
desc: "买家确认了收货",
date: "2022-10-10 10:00:00",
imgUrl:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
},
{
id: 3,
name: "林天树下",
desc: "买家评价了商品",
date: "2022-10-10 10:00:00",
imgUrl:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
},
{
id: 4,
name: "阎罗",
desc: "哈哈哈哈,商品真的是太好了,符合我们的预期,哈哈哈哈哈哈哈哈哈哈大王大大Jodi哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈的我的我的",
date: "2022-10-10 10:00:00",
imgUrl:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
},
],
};
},
};
</script>
<style>
</style>
三.运行结果
![](https://i-blog.csdnimg.cn/blog_migrate/acf09d0a389aceea025d1e9e7a4a7444.png)