Element-ui table中tag显示不同颜色

效果图

 

 

组件template中：

<el-table-column :label="$t('epmlang.epmInfo.sPMStatus')" class-name="status-col" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.sPMStatus | statusFilter">
            {{ scope.row.sPMStatus }}
          </el-tag>
        </template>
      </el-table-column>

js

 filters: {
    // el-tag类型转换
    statusFilter(status) {
      const statusMap = {
        PM: 'info',
        IDEL: 'danger',
        BUYOFF: 'success'
      }
      console.log(statusMap[status])
      return statusMap[status]
    }
  },