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

效果:

 

Vue——el-table每行添加上标_第1张图片

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


  

样式调整:

.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;
}

你可能感兴趣的:(Vue,el-table)