Elemetn Ui 中 el-table 实现表格根据数据值实现不同样式

首先这是一个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%;
}