element ui表格 局部更新某一行

前言

最近遇到了个需求，要求单击通过或者拒绝时隐藏 两个按钮并且显示状态 拒绝或 通过

问题出现

以下是这个状态切换的代码，根据v-if 判断状态是不是审核中，若是的话，就显示按钮，否则显示tag

      <el-table-column class-name="status-col" label="订单状态" width="140">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 'REVIEWING'" class="action-bts">
            <el-button type="success" size="mini" @click="passApply(scope.row.order_no, scope.$index)">通过</el-button>
            <el-button type="danger" size="mini" @click="openReasonDialog(scope.row.order_no, scope.$index)">拒绝</el-button>
          </div>
          <el-tag v-else :type="statusFilter(scope.row.status).type">{{ statusFilter(scope.row.status).label }}
          </el-tag>
        </template>
      </el-table-column>

要求不能整个表更新，只能更新这一个单元格，由于vue无法检测到数组内的更新，所以我们不能直接通过this.xx=xx来实现

问题解决

这里使用了vue提供的 this.$set()函数来解决，

我这里使用了
其中当前行row可以通过 scope.$index 获取，然后传入事件处理函数

this.$set(this.list[row], 'status', 'SUCCESS')

结尾

记录一下，挺好玩的。。。