VUE 表格中显示状态的列 颜色圆点+文字/颜色圆点+鼠标操作 两种表现方式

鼠标悬停在色块上显示提示框

VUE代码（element-UI）：

<el-table-column prop="status" label="状态" header-align="center" width="50%">
        <template slot-scope="scope">
          <div style="display: flex; justify-content: center; align-items: center;">
            <el-popover placement="top-start" trigger="hover" :content="showStatus(scope.row.status)">
              <span slot="reference" v-show="scope.row.status == 0">
                <i class="dotClass" style="background-color: #67C23A"></i>
              </span>
            </el-popover>
            <el-popover placement="top-start" trigger="hover" :content="showStatus(scope.row.status)">
              <span slot="reference" v-show="scope.row.status == 1">
                <i class="dotClass" style="background-color: #F56C6C"></i>
              </span>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" width="200">
        <template slot-scope="scope">
          <div style="display: flex; justify-content: center; align-items: center;">
            <span slot="reference" v-show="scope.row.status == 0" style=" margin-right: 8px;">
              <i class="dotClass" style="background-color: #67C23A"></i>
            </span>
            <span slot="reference" v-show="scope.row.status == 1" style=" margin-right: 8px;">
              <i class="dotClass" style="background-color: #F56C6C"></i>
            </span>
            {{ statusFormat(scope.row) }}
          </div>
        </template>
      </el-table-column>

样式

.dotClass {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}