<el-table-column label="等级" prop="almlvl" align="center" width="80px">
<template slot-scope="scope">
<div class="cusCell">
<div class="cus_circle" :class="[{'almlvl_1': scope.row.almlevel == 'WARNING'},{'almlvl_2':
scope.row.almlevel
== 'MINOR'},{'almlvl_3': scope.row.almlevel == 'MAJOR'},{'almlvl_4': scope.row.almlevel == 'CRITICAL'}]"></div>
</div>
</template>
</el-table-column>
<style>
.cusCell {
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cus_circle {
width: 18px;
height: 18px;
background-color: green;
border-radius: 9px
}
.almlvl_1 {
background: blue;
}
.almlvl_2 {
background: yellow;
}
.almlvl_3 {
background: orange;
}
.almlvl_4 {
background: red;
}
</style>
element 表格插槽的使用
最新推荐文章于 2024-06-06 11:13:04 发布