table等其他地方可能需要根据某个字段的值展示不同的状态，但是状态比较多的话却是需要很多的判断或者繁杂的三目判断，所以封装了一个用来展示的组件：
样式如图：
代码如下：
<template>
<div>
<span>
<span v-for="item in option" :key="item.value">
<span v-if="item.value === status">
<span class="dot" :class="item.type"></span>
<span :class="item.color">{{ item.label }}</span>
</span>
</span>
</span>
<span v-if="status === null || status === '-'">-</span>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
status: {
default: null,
},
option: {
required: false,
},
},
};
</script>
<style lang="scss" scoped>
.dot {
8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 6px;
&::before {
content: none;
}
}
.dot.success {
background-color: #67c23a;
}
.dot.danger {
background-color: #f56c6c;
}
.dot.info {
background-color: #909399;
}
.dot.warning {
background-color: #e6a23c;
}
.dot.none {
display: none;
}
.danger {
color: #f56c6c;
}
</style>
传参：
- status：当前的状态
- option：所有状态的数组，对应下方css样式