vue 根据不同的状态显示不同的颜色

场景：
根据不同的状态显示不同的背景色，共有以下几种状态
a. 草稿
b. 待开始
c. 进行中
d. 已暂停
e. 已结束

实现效果：

代码实现：

<template>
  <div>
    <ElTable :data="tableData">
      <ElTableColumn
        label="状态"
        width="115">
        <template slot-scope="scope">
          <p class="cm-status" :style="{'background': caseStatusColorFilter(scope.row.activityStatus)}">{{statusText(scope.row.activityStatus)}}</p>
        </template>
      </ElTableColumn>
    </ElTable>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 状态
      caseStatusMap: [
        {
          code: 1,
          name: '草稿',
          bgc: '#EFEFEF'
        },
        {
          code: 2,
          name: '待开始',
          bgc: '#E6F2FF'
        },
        {
          code: 3,
          name: '进行中',
          bgc: '#EDFAE1'
        },
        {
          code: 4,
          name: '已暂停',
          bgc: ' #FFEBD3'
        },
        {
          code: 5,
          name: '已结束',
          bgc: '#EFEFEF'
        }],

      tableData: [
        {
          id: 0,
          activityStatus: 1
        },
        {
          id: 1,
          activityStatus: 2
        },
        {
          id: 2,
          activityStatus: 3
        },
        {
          id: 3,
          activityStatus: 4
        }
      ]
    }
  },
  methods: {
    // 颜色过滤
    caseStatusColorFilter (val) {
      let col = null
      this.caseStatusMap.forEach(arg => {
        if (arg.code === val) {
          col = arg.bgc
        }
      })
      return col
    },

    statusText (status) {
      switch (status) {
        case 1: return '草稿'
        case 2: return '待开始'
        case 3: return '进行中'
        case 4: return '已暂停'
        case 5: return '已结束'
      }
    }
  }
}
</script>
<style scoped>
.cm-status {
  display: inline-block;
  border-radius: 2px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 20px;
}
</style>