首先这是一个el-table表格
<el-table-column prop="value" label="数据"></el-table-column>
我们希望根据value的值的正负来判断数据的样式,比如大于0一个样式,小于0又是一个样式,这时候首先想到的就是给这个表格添加类名,element-ui提供一个cell-class-name
属性需要绑定一个方法来判断,个人感觉比较麻烦。
这时我们可以使用Vue提供的slot
插槽来实现比较简单,如下:
<el-table-column prop="value" label="数据">
<template slot-scope="scope">
<div
class="span"
:class="[
scope.row.value *1 > 0? 'unReach' : 'reach' ]"
>
{{ scope.row.Link_ratio }}
</div>
</template>
</el-table-column>
这时我们发现单元格内有一个对应类名的盒子,我们直接给这个盒子对应类名写样式即可
.reach {
color: #00ff6e !important;
position: relative;
width: 100%;
}
.reach::before {
content: "";
position: absolute;
right: 0;
width: 12px;
height: 14px;
background: url("../../../assets/images/down.png");
background-size: cover;
}
.unReach {
color: #ff414a !important;
position: relative;
width: 100%;
}