element table表单根据不同状态展示不同颜色

效果图

代码

1. 新建公共组件

<template>
  <div
    class="dot"
    :class="'dot-' + type"
  />
</template>

<script>
export default {
  name: 'EmphasisDot',
  props: {
    type: {
      type: String,
      default: 'success'
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;

  &-success {
    background: #13ce66;
  }
  &-error {
    background: #ff4949;
  }
  &-warning {
    background: #ffba00;
  }
  &-primary {
    background: #1047f5;
  }
  &-info {
    background: #909399;
  }
}
</style>

2. 当前文件引入 使用

<el-table-column
          prop="activityStatus"
          label="banner状态"
          align="left"
        >
          <template slot-scope="scope">
            <div class="flex-center1">
            // 关键代码
              <EmphasisDot
                :type="activityStatusDot[scope.row.activityStatus]"
                style="position: relative; top: 0px"
              />
              <div style="padding-left: 5px">
                {{ activityStatusTable[scope.row.activityStatus] }}
              </div>
            </div>
          </template>
        </el-table-column>

<script>
  import EmphasisDot from '@/components/EmphasisDot/index.vue'
  export default {
    components: { EmphasisDot },
    data(){
    return{
      activityStatusTable: ['未开始', '进行中', '已结束'],
      activityStatusDot: ['primary', 'success', 'info'],
      }
    }
  }
</script>