关于vue el-button 动态获取个数并附不同的颜色

蔚落 2023-06-06 13:28 2阅读 0赞

原创链接 [https://blog.csdn.net/qq\_19808621/article/details/89514125][https_blog.csdn.net_qq_19808621_article_details_89514125]

--------------------

<el-col :span="12" class="ShowInfoRight">  
                <div class="ShowInfoSteps">  
                    <div class="SIstepsItem" v-for="(item, index) in stepsItems" :key="index" :value="index">  
                        <div class="stepsItemL">  
                            <p>\{ \{item.operatorName\}\}</p>  
                            <p>\{ \{item.operating\}\}</p>  
                        </div>  
                        <el-button :type="miStatusColor(item.miStatus)">\{ \{item.miStatus\}\}</el-button>  
                        <div class="stepsItemR">  
                            <p>\{ \{item.event\}\}</p>  
                            <p>\{ \{item.detail\}\}</p>  
                            <p>\{ \{item.memo\}\}</p>  
                        </div>  
                        <div class="showStepsLine"></div>  
                    </div>  
                </div>  
            </el-col>  
             <script>                 
            export default \{  
                data() \{  
                    return \{  
                        stepsItems:\[\],  
                        miStatusColor: function(val)\{  
                            if(val == '等待发送')\{  
                                return 'lightblue'  
                            \}else if(val == '等待接收')\{  
                                return 'orange'  
                            \}else if(val == '处理中')\{  
                                return 'green'  
                            \}else if(val == '延后处理')\{  
                                return 'danger'  
                             \}else \{  
                                return 'info'  
                            \}  
                        \}  
                    \}  
              \},  
            </script>

[https_blog.csdn.net_qq_19808621_article_details_89514125]: https://blog.csdn.net/qq_19808621/article/details/89514125