vue2.0+Element-ui应用【Table表格 不同的数据匹配不同的Tag标签】

1、el-table中根据某一字段的value显示不同类型的el-tag（适合只有两个value的字段）【三元表达式】

<el-table-column prop="colorName" label="颜色">
	<template slot-scope="scope">
		<el-tag size="small" :type="scope.row.colorName=== 'blue' ? 'primary' : 'success'">{{ scope.row.colorName}}</el-tag>
	</template>
</el-table-column>

效果图：

—————————————————————————————————————————————————
2、el-table中根据某一字段的id显示我想对应的name和不同类型的el-tag（适合含有多个value的字段）【过滤条件】

<el-table-column prop="colorId" label="颜色">
	<template slot-scope="scope">
		<el-tag :type="scope.row.colorId|getColorType" size="small ">{{scope.row.colorId|getColorName}}</el-tag>
	</template>
</el-table-column>

filters: {
      //tag类型
      getColorType(colorId) {
        const colorMap = {
          0: 'danger',
          1: '',
          2: 'success',
          3: 'warning',
          4: 'info',
        };
        return colorMap[colorId]
      },
      //颜色名称
      getColorName(colorId) {
        const colorMap= {
          0: '红色',
          1: '蓝色',
          2: '绿色',
          3: '黄色',
          4: '灰色',
        };
        return colorMap[colorId]
      }
    },

效果图：