vue2.0+Element-ui应用【Table表格 不同的数据匹配不同的Tag标签】
vue2.0+Element-ui学习2018.11.29关键词:el-table,el-tag1、el-table中根据某一字段的value显示不同类型的el-tag(适合只有两个value的字段)【三元表达式】<el-table-column prop=&amp
·
vue2.0+Element-ui学习
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]
}
},
效果图:
更多推荐
已为社区贡献4条内容
所有评论(0)