baozhida-deliver-medicine/src/components/logisticsTracking.vue

<template>
  <!-- 物流跟踪 -->
  <div>
    <div style="display: flex;margin: 30px 0px;" :key="Math.random()" v-if="activities.length > 0">
      <el-timeline :reverse="reverse">
        <el-timeline-item :type="activity.field" v-for="(activity, index) in activities" :key="index"
          :timestamp="activity.createdAt">
          {{activity.content}}
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-empty :image-size="100" v-else description="暂无物流信息"></el-empty>
  </div>
</template>

<script>
  export default {
    name: 'logisticsTracking',
    props: {
      // 表格边框
      activities: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        reverse: false,
        activitiessaf: [{
          field: 'primary',
          content: '活动按期开始',
          timestamp: '2018-04-15'
        }, {
          content: '通过审核',
          timestamp: '2018-04-13'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }]
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-timeline-item__timestamp.is-bottom {
    display: flex;
  }

  ::v-deep .el-timeline-item__content {
    display: flex;
    text-align: left;
  }

  ::v-deep .el-timeline {
    padding-left: 20px !important;
  }
</style>