关于表格不同状态不同颜色

关于表格不同状态不同颜色

技术杂谈小彩虹2021-08-27 0:29:03160A+A-

image.png

方法一:

缺点:会减少性能 switch得一直判断

image.png

<template slot-scope="scope">
    <span class="td-status" :class="getcontractCheckClass(scope.row)" >
      {{ contractCheckText[scope.row.contractCheck] }}
    </span>
</template>

methods里面写个方法

image.png

getcontractCheckClass(row) {
      let c = "";
      switch (row.contractCheck) {
        case 0:
          c = "draft";
          break;
        case 1:
          c = "nosure";
          break;
        case 2:
          c = "nocheck";
          break;
        case 3:
          c = "success";
          break;
        case 4:
          c = "fail";
          break;
      }
      return c;
    },

image.png

.td-status {
    display: inline-block;
    // width: 72px;
    height: 26px;
    border-radius: 2px;
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    &.draft {
      background: #f0f2f5;
      border-radius: 2px;
      color: #909399;
    }
    &.nocheck {
      background: #fff2dd;
      color: #ffad28;
    }
    &.success {
      background: rgba(13, 168, 139, 0.1);
      border-radius: 2px;
      color: #0da88b;
    }
    &.wait {
      background: #fff2dd;
      color: #ffad28;
    }
    &.fail {
      background: #fceded;
      color: #ef5656;
    }
  }

方法二:

优点:状态和颜色的映射关系都在字典里面被管理起来了

image.png

<el-table-column min-width="90" label="审核状态" align="left" show-overflow-tooltip >
    <template v-slot="scope">
      <span :class=" getContractCheckInfo(scope.row.contractCheck, 'class') " >{{ getContractCheckInfo(scope.row.contractCheck) }}</span
      >
    </template>
  </el-table-column>
const CONTRACTCHECKMAP = [
  {
    value: 0,
    text: "草稿",
    class: "span_info"
  },
  {
    value: 1,
    text: "待审核",
    class: "span_warning"
  },
  {
    value: 2,
    text: "审核通过",
    class: "span_success"
  },
  {
    value: 3,
    text: "审核不通过",
    class: "span_error"
  }
];
getContractCheckInfo(value, type = "text") {
  if (typeof value == "undefined") return "";
  return CONTRACTCHECKMAP.find(item => item.value == value)[type];
},
.span_success,
.span_danger,
.span_warning,
.span_info {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 2px;
  line-height: 1;
  text-align: center;
  font-size: @font14;
}
.span_success {
  background: #0da88b19;
  color: #0da88b;
}
.span_danger {
  background: #ef565619;
  font-size: @font14;
  color: #ef5656;
}
.span_warning {
  background: #f6a42019;
  font-size: @font14;
  color: #f6a420;
}
.span_info {
  background: #e4e4e4;
  font-size: @font14;
  color: #909399;
}

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们