是否已完成状态展示

已完成状态.png
 <el-table-column prop="status" label="完成状态" header-align="center" align="center">
  <template slot-scope="scope">
  <div v-if="scope.row.status == '0'">
    <div class="status_point" style="background-color: red"></div>未完成
    </div>
     <div v-if="scope.row.status == '1'">
     <div class="status_point" style="background-color: #67c23a"></div>已完成
    </div>
    </template>
     </el-table-column>

// 圆形状态按钮
    .status_point {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
        position: absolute;
        margin: 8px 0 0 -15px;
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容