要求説明:図、図二つの効果の変形図。図1は、表示状態が0「無効」状態「スタート」と表示されています
(図1)
(図2)
ソリューション:
<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;
}