vue---el-table根据数据不同,展示不同的内容
需求描述:举例说明,由图一修改为图二的效果。下图状态为1则显示“启动”,状态为0则显示“禁用”(图一)(图二)解决方法:<el-table-column prop="status" label="状态" width="150" align="center"><template slot-scope="scope">...
·
需求描述:举例说明,由图一修改为图二的效果。下图状态为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;
}
更多推荐
已为社区贡献45条内容
所有评论(0)