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

最新推荐文章于 2024-11-29 03:11:56 发布

Interest1_wyt

最新推荐文章于 2024-11-29 03:11:56 发布

阅读量7.8k

点赞数 12

分类专栏：前端知识 — 基础 + vue + react 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Interest1_wyt/article/details/122203338

版权

前端知识 — 基础 + vue + react 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了如何在项目中使用红绿圆点图标来代替文字，以更直观地展示状态信息。代码示例展示了在table表格中应用的方法，并提供了绿圆点和红圆点的独立使用代码。通过比较加与不加`margin-left:10px`的样式区别，建议开发者根据实际需求选择合适的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

        <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 和加的区别，具体是否加上这个样式配置根据实际情况选择。

不加：