Demand Description : illustration, a modified view of the FIG two effects. FIG 1 is the state "Start" is displayed, the display state is 0 "disabled"
(Figure 1)
(Figure II)
Solution :
<el-table-column prop="status" label="状态" width="150" align="center">
<template slot-scope="scope">
<span v-if="scope.row.status== 1">
<div class="status-icon icon1"></div>启动
</span>
<span v-if="scope.row.status== 0">
<div class="status-icon icon0"></div>禁用
</span>
</template>
</el-table-column>
.status-icon {
width: 8px;
height: 8px;
border-radius: 1px;
margin-right: 5px;
position: relative;
left: 32px;
bottom: -15px;
}
.icon1 {
background-color: #19be6b;
}
.icon0 {
background-color: #eb194d;
}