前端开发场景：流转记录

经常需要开发一些流转记录的功能，用时间线将多个流转节点串起来。

流转记录可以展开详情，展开/折叠时流程条也跟着伸缩

1、基于el-steps组件开发

<el-steps direction="vertical">
    <el-step v-for="(item,index) in list"
        :key="index">
        // 图标插槽，自定义图标
        <template slot="icon">
            ...
        </template>
        // 内容插槽
        <template slot="description">
            ...
            <el-collapse>结合折叠面板能实现流程条动态伸缩的效果
            不需要折叠面板的话，只展示流转节点的基本信息用<el-card>即可
        </template>
<el-steps>

2、基于el-timeline组件开发

<el-timeline>
      <el-timeline-item
        v-for="(item,index) in list"
        :key="index"
        :class="handleClass(item)" //根据item返回对应的class,可以自定义icon
        timestamp="item.timestamp" //时间戳，也可以隐藏
       > 
           <el-card></el-card>
           或者<el-collapse></el-collapse>
        </el-timeline-item>
</el-timeline>