element-ui 时间线动态修改图标颜色

1. 基本结构

<el-timeline>
  <el-timeline-item
    v-for="(activity, index) in activities"
    :key="index"
    :icon="activity.icon"
    :type="activity.type"
    :color="getColor(activity.color)"
    :size="activity.size"
    :timestamp="activity.timestamp">
    {{ activity.content }}
  </el-timeline-item>
</el-timeline>

2. data声明变量

data() {
    return {
      colors: {
        red: 'red',
        blue: 'blue',
        pink: 'pink',
      },
      activities: [{
        content: '支持自定义颜色',
        timestamp: '2018-04-03 20:46',
        color: 'red'
      }, {
        content: '支持自定义尺寸',
        timestamp: '2018-04-03 20:46',
        color: 'blue'
      }, {
        content: '默认样式的节点',
        timestamp: '2018-04-03 20:46',
        color: 'pink'
      }]
  }
}

3. methods方法

getColor(type) {
    return this.colors[type]
}