自定义时间线

自己写的 不知道还有没有更好的方法

image.png

html:

<el-timeline>
  <el-timeline-item
    style="height: 120px;width: 100%;margin-bottom: 10px"
    v-for="(activity, index) in activities"
    :key="index"
    :icon="iconSelect(activity.action)"
    :color="colorSelect(activity.action)"
    :type="typeSelect(activity.action)">                            
    <div style="width: 100%;padding: 10px;font-size: 14px;font-weight: bolder">
      {{ activity.operatorUserName }}
    </div>
    <div style="width: 100%;padding: 10px">
      <el-tag :type="typeSelect(activity.action)">{{activity.action}}</el-tag>
    </div>
    <div style="width: 100%;padding: 10px">
      {{ activity.operatorTime }}
    </div>
   </el-timeline-item>
</el-timeline>

js

iconSelect(val) {
            switch (val) {
                case '发布':
                    return 'el-icon-more'
                    break
                case '查阅':
                    return 'el-icon-more'
                    break
                case '受理':
                    return 'el-icon-more'
                    break
                case '反馈':
                    return 'el-icon-more'
                    break
                case '催办':
                    return 'el-icon-more'
                    break
                case '完成':
                    return 'el-icon-more'
                    break
                case '归档':
                    return 'el-icon-more'
                    break
                case '驳回':
                    return 'el-icon-more'
                    break
                case '审核通过':
                    return 'el-icon-more'
                    break
                case '转派':
                    return 'el-icon-more'
                    break
                case '指派':
                    return 'el-icon-more'
                    break
            }
        },
        colorSelect(val) {
            switch (val) {
                case '发布':
                    return 'red'
                    break
                case '查阅':
                    return '#0bbd87'
                    break
                case '受理':
                    return 'red'
                    break
                case '反馈':
                    return 'red'
                    break
                case '催办':
                    return 'red'
                    break
                case '完成':
                    return 'red'
                    break
                case '归档':
                    return 'red'
                    break
                case '驳回':
                    return 'red'
                    break
                case '审核通过':
                    return 'red'
                    break
                case '转派':
                    return 'red'
                    break
                case '指派':
                    return 'red'
                    break
            }
        },
        typeSelect(val) {
            switch (val) {
                case '发布':
                    return "primary"
                    break
                case '查阅':
                    return "success"
                    break
                case '受理':
                    return 'warning'
                    break
                case '反馈':
                    return 'danger'
                    break
                case '催办':
                    return 'danger'
                    break
                case '完成':
                    return 'success'
                    break
                case '归档':
                    return 'success'
                    break
                case '驳回':
                    return 'danger'
                    break
                case '审核通过':
                    return 'primary'
                    break
                case '转派':
                    return 'warning'
                    break
                case '指派':
                    return 'warning'
                    break
            }
        },