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 "卖";
      }
 },

我在项目中用到了这种方法：

1，这是静态的方式实现：

 <!--用户列表区域-->
         <el-table :data="userlist" border stripe>
            <el-table-column type="index"></el-table-column>
            <el-table-column label="姓名" prop="username"></el-table-column>
            <el-table-column label="邮箱" prop="email"></el-table-column>
            <el-table-column label="电话" prop="mobile"></el-table-column>
            <el-table-column label="角色" prop="role_name"></el-table-column>
            <el-table-column label="状态" prop="mg_state">
               <template slot-scope="scope">
                  <el-switch v-model=scope.row.mg_state @change="userStateChange(scope.row)"></el-switch>
               </template>
            </el-table-column>
            <el-table-column label="操作" prop="mg_state" width="134px">
               <template slot-scope="scope">
                  <!--                   修改按钮-->
                  <el-tooltip content="编辑" placement="top" :enterable="true">
                     <el-button type="primary" icon="el-icon-edit" size="mini" circle
                        @click="showEditDialog(scope.row.id)"></el-button>
                  </el-tooltip>
                  <!--                   删除按钮-->
                  <el-tooltip content="删除" placement="top" :enterable="false">
                     <el-button type="danger" icon="el-icon-delete" size="mini" circle
                        @click="removeUserById(scope.row.id)"></el-button>
                  </el-tooltip>
                  <!--                   角色分配按钮-->
                  <el-tooltip content="角色分配" placement="top" :enterable="false">
                     <el-button type="success" icon="el-icon-s-tools" size="mini" circle @click="setRole(scope.row)">
                     </el-button>
                  </el-tooltip>

               </template>
            </el-table-column>

         </el-table>

2，动态的方式实现：

<template slot-scope="scope">
                <div v-if="reFlag(scope.row, item)">
                  <el-input v-model="scope.row[item.fieldName]"></el-input>
                </div>

                <div v-else>
<!--                  {{ scope.row[item.fieldName].value }}-->

                  <div  v-if="scope.row[item.fieldName].season !== null && scope.row[item.fieldName].season !== ''  " style="background:#f8c6c6;text-align: center">
                    <el-tooltip :content="'season值:'+scope.row[item.fieldName].season" placement="top" :enterable="true">
                    <div>{{ scope.row[item.fieldName].value }}</div>
                    </el-tooltip>
                  </div>


                  <span v-else style="text-align: center" >{{ scope.row[item.fieldName].value }}</span>

                </div>

              </template>

动态的方式修改单元格背景颜色还有动态的方式添加文字提示框：