表格自定义不同状态的样式

当表格中数据很多，我们需要根据不同的状态来区分自定义样式时，可以参考本文。

---

前言

ElementUI提供了表格的用法，那我们就在表格的基础上进一步完成具体的需求。

---

一、实现效果

二、实现步骤

1.vue页面

<el-table-column label="状态" align="center">
    <template slot-scope="scope">
      <div
        class="status-bg"
        :class="
          scope.row.status == 1
            ? 'primary'
            : scope.row.status == 2
            ? 'success'
            : 'danger'
        "
        :style="{
          '--bgColor': statusColorList[scope.row.status - 1].color
        }"
      ></div>
      {{ statusColorList[scope.row.status - 1].name }}
    </template>
</el-table-column>

// 数据
statusColorList: [
   { color: '#005BFF', name: '待审核' },
   { color: '#67C23A', name: '已通过' },
   { color: '#FF192C', name: '已拒绝' }
],

2.css样式

.status-bg {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  &::before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    content: '';
    background-color: var(--bgColor);
    border-radius: 50%;
  }
  &.primary {
    background-color: rgba(0, 91, 255, 0.2);
  }
  &.danger {
    background-color: rgba(255, 25, 44, 0.2);
  }
  &.success {
    background-color: rgba(103, 194, 58, 0.2);
  }
}

---

总结

以上就是今天要讲的内容，动态的设置表格中状态的样式，希望对你有所帮助。