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>
标签：vue,展示,圆点,10px,使用,红绿 From： https://www.cnblogs.com/cmooc/p/16918374.html