Vue——el-table每行添加上标

效果：

 

代码：对于数量compNum为0的就不显示上标

<el-table-column prop="name" label="项目名称" width="260" show-overflow-tooltip>
  <template slot-scope="scope">
    <el-badge v-if="scope.row.compNum" :value="scope.row.compNum" class="item" type="primary">{{scope.row.name}}</el-badge>
    <span v-if="!scope.row.compNum">{{scope.row.name}}</span>
  </template>
</el-table-column>

样式调整：

.el-badge__content.is-fixed {
    position: absolute;
    top: 5px;
    right: 0px;
    -webkit-transform: translateY(-50%) translateX(100%);
    transform: translateY(-50%) translateX(100%);
}
.el-badge__content {
    background-color: #F56C6C;
    border-radius: 10px;
    color: #FFF;
    display: inline-block;
    font-size: 4px;
    height: 14px;
    line-height: 14px;
    padding: 0 4px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #FFF;
}