el-button根据其他字段的值 改变button 按钮的值，实现页面功能及在同一个button中给不同的值添加点击事件_el-butten选择一条数据后按钮变化

根据同一个表格中的某个字段改变另一字段的值 （如下图）

   例:参考状态栏字段：

 <hy-table-column  name="state" title="状态"  align="center" width="100" type="drop"
            dropname = "UEP.STATE"
 />

方法一：使用三元运算符：

<hy-button   type="text" size="small" @click="handleIsDisplay(scope.$index, scope.row)">
                            {{scope.row.state=='已入库'?'详情':(scope.row.state=='申请中'?'点击确认':(scope.row.state=='已退库'?'申请入库':'审核'))}}
                            </hy-button> 

方法二：使用 v-if   /  v-else-if   / v-else:

<hy-button type="text" size="small" v-if="scope.row.state=='已入库'">
                <i class="fa fa-ban"></i> 详情
                </hy-button>            
                <hy-button v-else-if="scope.row.state=='待审核'" type="text" size="small">
                <i class="fa fa-ban"></i> 审核
                </hy-button>            
                <hy-button v-else-if="scope.row.state=='已退库'" type="text" size="small">
                <i class="fa fa-ban"></i> 重新申请
                </hy-button>            
                <hy-button v-else-if="scope.row.state=='申请中'" type="text" size="small">
                <i class="fa fa-ban"></i> 申请确认 

方法三：  使用 <span> 标签 ：

    <template scope="scope">
        <span v-if="scope.row.state==='审核通过'" style="color: green">审核通过</span>
        <span v-else-if="scope.row.state==='待审核'">待审核</span>
        <span v-else style="color: red">未通过</span>
    </template>

效果图如下：

 

补充1：使用三元运算符 根据对应值 改变字段颜色的方法 

el-table-column表格根据不同值，显示不同颜色

 

实现代码为：

任务类型这一列的值如果是“None”，则显示红色，如下图：

 

补充2：

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