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

原创链接 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>