首页 > 其他分享 >如何根据事件的不同状态显示不同颜色样式

如何根据事件的不同状态显示不同颜色样式

时间:2022-09-23 10:56:03浏览次数:58  
标签:status 10 01 颜色 样式 不同 stateCode 待处理 class

如何根据后端传的状态(码)让状态显示不同样式?

事件处理状态中分为三种状态:待处理、已处理、处理中,需求要求不同状态字体显示不同颜色

【 三元表达式,?前面的式子为turn就显示 :前面的内容,为false则显示:后面得内容】

共同class “cell_right”

:class是获取动态class

方式一:

直接在动态class用三元表达式判断

HTML:
<div v-if="innerData.dataType !== 2"   class="cell_right"   :class="[item.stateCode === 0 ? 'status_one'  : item.stateCode === 1  ? 'status_two'  : 'status_three']" >
       {{ item.status }}
        <!--  {{ item.stateCode === 0 ? "待处理"  : item.stateCode === 1  ? "已处理"  : "处理中" }}--> 
 </div>

方式二:函数传参

HTML:
<div v-if="innerData.dataType !== 2"   class="cell_right"   :class="getCode(item.status)" >
      <!--   {{ item.status }}-->
        {{ item.stateCode === 0 ? "待处理"  : item.stateCode === 1  ? "已处理"  : "处理中" }} 
 </div>

 class是原本的样式,

动态 :class="getCode(item.status)"调用函数getCode,并传参

js:
<script>
export default {
     data() {
    eventList: [
        {
          name: '大坝变形异常',
          time: '2022-01-01 10:52:10',
          stateCode: 1  //状态码
          //   status: "待处理", //状态
        },
        {
          name: '渗流异常',
          time: '2022-01-01 10:52:10',
          stateCode: 1
          //   status: "已处理",
        },
        {
          name: '压力异常',
          time: '2022-01-01 10:52:10',
          stateCode: 2
          //   status: "处理中",
        },
        {
          name: '渗流量超出警戒值',
          time: '2022-01-01 10: 52: 10',
          stateCode: 0
          //   status: "待处理",
        },
        {
          name: '渗流量超出警戒值',
          time: '2022-01-01 10: 52: 10',
          stateCode: 0
          //   status: "待处理",
        }
      ]
    }
     methods: {
    getCode(code) {
     switch(code){
         case 0:
             return "status_one";
         case 1:
             return "status_two";
         case 2:
             return "status_three";
     }
    },
    }
    
    }
</script>

 getCode()接收状态码之后利用Switch判断语句,根据传入的参数判断返回哪一个class

CSS:
<style lang="scss" scoped>
    .cell_right{
    
    }
    .status_one {
  color: #cf6363;
  font-weight: 600;
}
.status_two {
  color: #a3a3a3;
  font-weight: 600;
}
.status_three {
  color: #fff;
  font-weight: 600;
}
</style>

如果原class“cell_right”里面有的样式,动态class里也有则动态class会替换该样式,如果原里面没有的样式,在动态里面出现就是在原上叠加出现的样式

效果图:

标签:status,10,01,颜色,样式,不同,stateCode,待处理,class
From: https://www.cnblogs.com/xz1005xfx/p/16721866.html

相关文章

  • 博客园MarkDown 代码块样式修改
    1.下载样式您可以选择你需要的语言,我直接默认下载了2.查看样式效果这是我使用的样式3.使用样式解压下载的文件,打开你要是使用的样式文件,复制里面的内容直接复制到此......
  • sql练习--查看不同年龄段的用户明细
    描述题目:现在运营想要将用户划分为20岁以下,20-24岁,25岁及以上三个年龄段,分别查看不同年龄段用户的明细情况,请取出相应数据。(注:若年龄为空请返回其他。)   示例:user......
  • LeetCode 63 不同路径 II
    dfs(超时)classSolution{public:intres=0;voiddfs(inti,intj,vector<vector<int>>&obstacleGrid){if(i==obstacleGrid.size()-1&&......
  • 前端导出并导出样式
    页面导入插件  具体代码://将我们生成好的excel转换成blob,供xlsx-populate使用workbook2blob(workbook){//生成excel的配置项constwopts={//要生成的......
  • LeetCode 62 不同路径
    dfs(超时)classSolution{public:intres=0;voiddfs(intx,inty,intm,intn){if(x==m&&y==n)res++;if(x+1<=m......
  • 自定义组件中使用half-screen-dailog 无法舒勇外部样式
     为了将弹窗更方便的调用,封装了组件,但是发现一个问题,外部样式类在组件中是无法正常使用的。 也就说在组件的wxss中是无法正常使用.weui-half-screen-dialog这个外部......
  • 颜色英文代码全集
    redgreenbluemagentayellowchocolateblackaquamarinelimefuchsiabrassazurebrownbronzedeeppinkalicebluegray......
  • MyISAM与InnoDB 的区别(9个不同点)
    区别:1.InnoDB支持事务,MyISAM不支持,对于InnoDB每一条SQL语言都默认封装成事务,自动提交,这样会影响速度,所以最好把多条SQL语言放在begin和commit之间,组成一个事务;2.InnoDB......
  • 使用样式组件的侧边栏切换
    使用样式组件的侧边栏切换在本文中,我们将探讨如何使用样式组件为Menu/SideBar创建切换功能。一个侧边栏切换是一个按钮,当按下时会生成一个左或右区域滚动容器出......
  • css 列表样式,<a> 连接文字超长省略
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......