要素タイムラインの実装

<div class="block">
  <div class="radio">
    並べ替え:
    <el-radio-group v-model="reverse">
      <el-radio :label="true">逆順</el-radio>
      <el-radio :label="false">ポジティブシーケンス</el-radio>
    </el-ラジオグループ>
  </div>

  <el-timeline :reverse="逆">
    <el-タイムライン項目
      v-for="(アクティビティ、インデックス) アクティビティ内"
      :key="インデックス"
      :timestamp="アクティビティ.timestamp">
      {{アクティビティ.コンテンツ}}
    </el-timeline-item>
  </el-timeline>
</div>

<スクリプト>
  エクスポートデフォルト{
    データ（） {
      戻る {
        逆: 真、
        アクティビティ: [{
          内容: 「アクティビティは予定通り開始されました」
          タイムスタンプ: '2018-04-15'
        }, {
          内容: 「審査合格」
          タイムスタンプ: '2018-04-13'
        }, {
          コンテンツ: '正常に作成されました'、
          タイムスタンプ: '2018-04-11'
        }]
      };
    }
  };
</スクリプト>

<div class="block">
  <el-タイムライン>
    <el-タイムライン項目
      v-for="(アクティビティ、インデックス) アクティビティ内"
      :key="インデックス"
      :icon="アクティビティアイコン"
      :type="アクティビティタイプ"
      :color="アクティビティ.color"
      :size="アクティビティサイズ"
      :timestamp="アクティビティ.timestamp">
      {{アクティビティ.コンテンツ}}
    </el-timeline-item>
  </el-timeline>
</div>

<スクリプト>
  エクスポートデフォルト{
    データ（） {
      戻る {
        アクティビティ: [{
          内容:「アイコンの使用をサポートする」
          タイムスタンプ: '2018-04-12 20:46',
          サイズ: 「大」、
          タイプ: 'プライマリ'、
          アイコン: 'el-icon-more'
        }, {
          内容: 「カスタムカラーをサポート」
          タイムスタンプ: '2018-04-03 20:46',
          色: '#0bbd87'
        }, {
          内容: 「カスタムサイズをサポート」
          タイムスタンプ: '2018-04-03 20:46',
          サイズ: '大きい'
        }, {
          コンテンツ: 'デフォルト スタイル ノード'、
          タイムスタンプ: '2018-04-03 20:46'
        }]
      };
    }
  };
</スクリプト>

<div class="block">
  <el-タイムライン>
    <el-timeline-item タイムスタンプ="2018/4/12" 配置="トップ">
      <el-card>
        <h4>Github テンプレートを更新する</h4>
        <p>Wang Xiaohu が 2018/4/12 20:46 に投稿</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item タイムスタンプ="2018/4/3" 配置="トップ">
      <el-card>
        <h4>Github テンプレートを更新する</h4>
        <p>王小湖が2018/4/3 20:46に投稿</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item タイムスタンプ="2018/4/2" 配置="トップ">
      <el-card>
        <h4>Github テンプレートを更新する</h4>
        <p>王小湖が2018/4/2 20:46に投稿</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</div>