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 @   倔强的烤马铃薯  阅读(287)  评论(0编辑  收藏  举报  
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
点击右上角即可分享
微信分享提示