element-UI 根据table中数据改变颜色 或显示对应内容

element-UI 根据table中数据改变单元格数据颜色或显示对应的内容的实现如下：

1.根据table中数据不同改变颜色（正数颜色为红色，负数颜色为绿色）

实现代码：

 <el-table-column prop="sharesReturn" label="盈亏(元)">
                <template scope="scope">
                  <span v-if="scope.row.sharesReturn>=0" style="color:red">{{ scope.row.sharesReturn }}</span>
                  <span v-else style="color: #37B328">{{ scope.row.sharesReturn }}</span>
                </template>
</el-table-column>
  <el-table-column prop="strategyEarnings" label="盈亏比">
                <template scope="scope">
                  <span v-if="scope.row.strategyEarnings>=0" style="color:red">{{ scope.row.strategyEarnings }}</span>
                  <span v-else style="color: #37B328">{{ scope.row.strategyEarnings }}</span>
                </template>
</el-table-column>

上述代码中的if-else还可以换成三目运算符。。。。。。。。。

 2.根据table中数据不同显示对应的内容（1数字表示买，-1数字表示卖）

实现代码一：

 <el-table-column prop="direction" label="买卖方向">
                <template slot-scope="scope">
                  <span v-if="scope.row.direction=== 1">买</span>
                  <span v-if="scope.row.direction=== -1">卖</span>
	              </template>
 </el-table-column>

实现代码二：

 <el-table-column prop="direction" label="买卖方向" :formatter="statedirection">
 </el-table-column> //关于formatter的解释各位同学可以查看官网

在下面方法中：
 //买卖方向
    statedirection(row) {
      if (row.direction === 1) {
        return "买";
      } else if (row.direction === -1) {
        return "卖";
      }
 },