表格某一列根据值不同，显示不同颜色vue

最新推荐文章于 2024-06-17 17:14:37 发布

h_6543210

最新推荐文章于 2024-06-17 17:14:37 发布

阅读量2.3k

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/m0_68428581/article/details/130224836

版权

1.样式图

图一：

图二：

2.相关代码

status的值来自字典

<el-table-column
   label="状态"
   align="left"
   prop="status"         
   width="110"
>
   <template slot-scope="scope">           
      //图一样式
      <el-button :type="getType(scope.row)" size="mini">
           {{statusFormat(scope.row)}}
      </el-button>
      //图二样式
      //<span :class="{'warningColor':scope.row.status==0,
      //   'mainColor':scope.row.status==1,
      //   'infoColor':scope.row.status==2,'dangerColor':scope.row.status==3,
      //   'sucessColor':scope.row.status==4}"
      //>
      //  {{statusFormat(scope.row)}}
      //</span>
   </template>  
</el-table-column>

methods: { 
   //图一
   getType(row){
      if(row.status==0){
          return 'warning'
      }else if(row.status==1){
          return 'primary'
      }else if(row.status==2){
          return 'info'
      }else if(row.status==3){
          return 'danger'
      }else if(row.status==4){
          return 'success'
      }
   }
}

<style scoped>
/* 图二 */
.mainColor {
    color: #409EFF;
}
.sucessColor {
    color: #6EC543;
}
.warningColor{
    color: #fda22b;
}
.infoColor{
    color: #cecfc3;
}
.dangerColor{
    color: #EB4040;
}
</style>