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

<el-timeline :reverse="reverse">
	<el-timeline-item v-for="(activity, index) in activities" 
	:key="index" 
	:icon="actiicon(activity.publics)"//动态设置图标
	 :color='colors(activity.publics)' //动态设置颜色
	 :timestamp="activity.timestamp">
	 {{activity.content}}
	</el-timeline-item>
</el-timeline>
<script>
  export default {
    data() {
      return {
        reverse: true,//设置reverse,true为倒序,false为正序
        activities: [{
          content: '角色一',
          timestamp: '2018-04-15',
          publics:'Y'
        }, {
          content: '角色二',
          timestamp: '2018-04-13'
          publics:'R'
        }, {
          content: '角色三',
          timestamp: '2018-04-11'
          publis:'N'
        }]
      };
    },
    methods: {
    	actiicon(index){
			if(index=='Y'){
				return 'el-icon-check'
			}else if(index=='R'){
				return 'el-icon-close'
			}else{
				return 'el-icon-more'
			}
		},
		colors(index){
			if(index=='Y'){
				return '#409EFF'
			}else if(index=='R'){
				return '#F56C6C'
			}else{
				return '#909399'
			}
		}
		
    }
  };
</script>
posted @ 2020-12-25 17:15  倔强的烤马铃薯  阅读(401)  评论(0)    收藏  举报  来源