vue 状态类展示使用红绿圆点

vue 状态类展示使用红绿圆点

通常对于一些在线、离线类的展示使用图标展示比使用文字描述会更加清晰直观。项目中使用的代码如下：

HTML

<el-table-column prop="status" label="状态" width="70%" >
              <template slot-scope="scope" >
                <span slot="reference" v-if="scope.row.status == 1">
                  <i class="dotClass" style="</i>
                </span>
                <span slot="reference" v-if="scope.row.status == 0" >
                  <i class="dotClass" style="background-color: red"></i>
                </span>
              </template>
            </el-table-column>

 

csss

    .dotClass {
      width:10px;
      height:10px;
      border-radius: 50%;
      display: block;
      margin-left: 10px;  //这个用于圆点居中

 

单独使用

//绿圆点 
<i class="dotClass" style="background-color: springgreen;width:10px;  height:10px;  border-radius: 50%;  display: block"></i>
 
//红圆点
<i class="dotClass" style="background-color: red ;width:10px;  height:10px;  border-radius: 50%;  display: block"></i>