【tips】常用不同状态小圆点样式css

常用两种样式使用

<el-table-column label="采集项状态" prop="status"><template #default="scope"><!-- 1. --><div><div v-show="isVaildValue(scope.row.status)":class="['round-dot', scope.row.status == 1 ? 'green' : 'gray']"></div>{{ collectionitem_typeFormatStatus(scope.row, scope.column) }}</div><!-- 2. --><div:class="isVaildValue(scope.row.status) ? ['round-dot-before', scope.row.status == 1 ? 'green' : 'gray'] : ''">{{ collectionitem_typeFormatStatus(scope.row, scope.column) }}</div></template></el-table-column>

const isVaildValue = (value) => {if (value === 0 || value === '0') return truereturn !!value
}

// 1.小圆点 单独标签
.round-dot {width: 8px;height: 8px;border-radius: 50%;display: inline-block;margin-right: 4px;&.green{background-color: #24d132}&.red{background-color: red}&.gray{background-color: gray;}
}
// 2.小圆点 伪元素
.round-dot-before{position: relative;padding-left: 12px;min-height: 8px;&::before{display: block;content: '';position: absolute;top: 50%;left: 0;width: 8px;height: 8px;border-radius: 50%;transform: translateY(-50%);}&.green{&::before{background-color: #24d132}}&.red{&::before{background-color: red}}&.gray{&::before{background-color: gray;}}}