vue技巧（七）状态类展示使用红绿圆点

通常对于一些在线、离线类的展示使用图标展示比使用文字描述会更加清晰直观。项目中使用的代码如下：<el-table-column prop="status" label="状态" width="70%" ><template slot-scope="scope" ><span slot="reference" v-if="scope.row.status == 1"&g

Interest1_wyt

7381人浏览 · 2021-12-28 21:39:33

Interest1_wyt · 2021-12-28 21:39:33 发布

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

        <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="background-color: springgreen"></i>
            </span>
            <span slot="reference" v-if="scope.row.status == 0" >
              <i class="dotClass" style="background-color: red"></i>
            </span>
          </template>
        </el-table-column>

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

我们项目中是在table表格中展示的红绿圆点，如果想提取出来单独使用，可以直接拷贝如下代码：

//绿圆点 
<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>

最后这里展示下不加 margin-left: 10px 和加的区别，具体是否加上这个样式配置根据实际情况选择。

不加：