vue的表格操作之锁定解锁存入拒绝

<el-table-column label="状态" align="center" prop="status"  >
  <template slot-scope="scope">
    <span
      :style="{color: (status = statusOptions[parseInt(scope.row.status)]).color}"
    >{
  
  { status.dictLabel }}</span>
  </template>
</el-table-column>

<el-table-column label="操作" align="center" class-name="small-padding fixed-width " fixed="right" width="180px">
  <template slot-scope="scope">
    <el-button
      size="mini"
      type="text"
      v-if="scope.row.status == 0"
      icon="el-icon-lock"
      @click="handleLock(scope.row)"
      v-has-permi="['pay:payAgentRechargeAccountLog:lock']"
    >锁定
    </el-button>
    <el-button
      size="mini"
      type="text"
      v-if="scope.row.status == 1"
      icon="el-icon-unlock"
      @click="handleUnlock(scope.row)"
      v-has-permi="['pay:payAgentRechargeAccountLog:unlock']"
    >解锁
    </el-button>
    <el-button
      size="mini"
      type="text"
      style=" color: #5FB878"
      v-if="scope.row.status == 1"
      icon="el-icon-circle-check"
      @click="handleWithdraw(scope.row)"
      v-has-permi="['pay:payAgentRechargeAccountLog:artificial']"
    >存入
    </el-button>
    <el-button
      size="mini"
      type="text"
      style=" color: #FF5722"
      v-if="scope.row.status < 2 || scope.row.status == 4"
      icon="el-icon-circle-close"
      @click="handleRefused(scope.row)"
      v-has-permi="['pay:payAgentRechargeAccountLog:refused']"
    >拒绝
    </el-button>
  </template>
</el-table-column>

this.getDicts("recharge_status").then(response => {
  this.statusOptions = response.data;
});

公用方法：

// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
  return request({
    url: url.platformWeb + '/system/dict/data/type/' + dictType,
    method: 'get'
  })
}