VUE中点击审核按钮，在页面渲染不同的状态，同时按钮被禁用

        当我们在做项目的时候，会遇到这样的需求，比如说vue页面，显示待审核，当我们点击了审核按钮以后，根据，输入的审核意见，vue页面要动态渲染成已审核或者已拒绝，同时审核按钮会禁用。

具体效果

vue页面初始状态

点击审核的弹窗

 最后页面的结果

具体代码显示：

<template>
<div>
<el-table-column label="审核状态" prop="chkState">
            <template slot-scope="scope">
              {{ chkState(scope.row.chkState) }}
            </template>
 </el-table-column>
 <template slot-scope="scope">
              <el-button
                type="text"
                :disabled="scope.row.chkState === 1 || scope.row.chkState === 2"
                @click="hChkState(scope.row)"
                >审核</el-button
              >
 </template>
</div>
</template>
 <!-- 审核弹窗 -->
      <el-dialog title="题目审核" :visible.sync="showChkStateDialog">
        <el-form>
          <el-form-item>
            <el-radio-group v-model="check.chkState">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input
              type="textarea"
              v-model="check.chkRemarks"
              style="width:400px"
              placeholder="请输入审核意见"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="showChkStateDialog = false">取消</el-button>
            <el-button type="primary" @click="hSubmitChkState">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>


<script>
export default {

data(){
 return{
showChkStateDialog:false, // 审核弹窗

// 题目审核
      check: {
        chkState: 1,
        chkRemarks: '',
        id: ''
      }
   }
  }
},
methods:{
   // 审核状态
    chkState(data) {
      if (data === 0) {
        return '待审核'
      } else if (data === 1) {
        return '已审核'
      } else {
        return '已拒绝'
      }
    },
  // 点击审核
    hChkState(row) {
      this.showChkStateDialog = true
      this.check.id = row.id
      console.log(this.check.id)
    },
 // 点击审核的确定
    async hSubmitChkState() {
      try {
        const res = await choiceCheck({ ...this.check, id: this.check.id })
        this.$message.success('审核完成')
        console.log(res)
        // 关闭弹窗
        this.showChkStateDialog = false
        // 重新渲染数据
        this.loadQuestion()
      } catch (err) {
        this.$message.error('审核失败')
      }
    },


}

 备注：状态是根据后台接口确定的