ElementUI UI框架中竖式步骤条step组件如何在右侧显示日期

1.场景：

实际开发中，我们经常会遇到步骤条可能会是竖直的，例如审批、快递配送等案例。今天给大家分享一个比较常用的案例，配后后端返回的数据实体举例：
图一为ElementUI框架中提供的原始step组件，图二为我们今天要实现的效果：

图一：

图二：

2.实现：

<template>
	<div>
    
    <div style="overflow-y: auto">
      <el-steps direction="vertical" :active="2" style=" max-height: 500px" :space="200" >
        <el-step 
          v-for="item in approvalSuccessData" 
            :key="item.grade" 
            :description="item.isApprove === 0 ? '等待审批' : 
              (item.isApprove === 1 ? '审批中': 
                (item.isApprove === 2  ? '审批通过': 
                  (item.isApprove === 3 ? '审批不通过': '')))" 

          :status="item.isApprove === 0
            ? 'wait': (item.isApprove === 1
              ? 'process':(item.isApprove === 2
                ? 'finish':(item.isApprove === 3
                  ? 'error': '')))" >
          <template slot="title" >
            <div class="title_wrap">
              <span class="name">{{item.userName}}span>
              <span class="date">{{item.approvalDate}}span>                
            div>
          template>
        el-step>
      el-steps>        
    div>
    
  div>
template>

<script>
export default {
	data() {
		return {
      approvalSuccessData: [], // 审批进度数据
		};
  },
  create(){
    this.approvalSuccessData = [
      {
        "requestId": "c16374401369f1b5a05f094d651cce74",
        "userId": "ff25f286dd5d0b10ba18e779b2977f94",
        "userName": "二狗子",
        "isApprove": 2,
        "approvalDate": "2020-10-05 23:00:00",
        "grade": 1
      },
      {
        "requestId": "c16374401369f1b5a05f094d651cce74",
        "userId": "9e22f6feba9411e99092fa163e6c79ee",
        "userName": "大狗子",
        "isApprove": 0,
        "grade": 2
      },
  ],
  }
};
</script>

至此，我们的仿真弹窗就实现了，本人亲测有效，如有问题，请在评论区留言~~~