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

700 阅读1分钟

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