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

原创链接 vue element-ui后台动态获取数据，根据不同数据改变按钮显示颜色_vue实现不同参数按钮颜色变化-CSDN博客 

---

         

<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>