封装历史记录组件_前端类似内网通历史记录组件-CSDN博客

本文链接：https://blog.csdn.net/qq_35191010/article/details/129156643

该文章展示了一个Vue.js组件，用于显示历史记录列表。组件使用v-for指令遍历并渲染列表数据，包含用户名称、日期、描述等信息。数据绑定到父组件传递的listArr属性上，展示了动态内容加载的功能。

摘要由CSDN通过智能技术生成

一.子组件

<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>