vue---el-table根据数据不同，展示不同的内容
需求描述：举例说明，由图一修改为图二的效果。下图状态为1则显示“启动”，状态为0则显示“禁用”
（图一）
（图二）
解决方法：
<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;
}
下一篇：
在IDEA中如何新建一个web工程