vue element-ui后台动态获取数据，根据不同数据改变按钮显示颜色

vue element-ui后台动态获取数据，根据不同数据改变按钮显示颜色，el-button中绑定type，
:type="miStatusColor(item.miStatus)

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

注：很多颜色值是自己定义