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>

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

GitHub 加速计划 / eleme / element
14
2
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐