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

最新推荐文章于 2024-09-13 16:13:13 发布

丹丹呀～～

最新推荐文章于 2024-09-13 16:13:13 发布

阅读量3.7k

点赞数 4

文章标签： vue.js html html5

本文链接：https://blog.csdn.net/weixin_55690518/article/details/120168913

版权

本文介绍了一个Vue项目的实现过程，涉及页面在用户点击审核按钮后如何根据输入的审核意见动态更新为'已审核'或'已拒绝'状态，并禁用审核按钮。通过展示Vue模板代码，详细解释了如何利用el-table-column和el-button组件结合弹窗实现这一功能。同时，当审核完成后，通过接口调用更新数据并重新加载问题。

摘要由CSDN通过智能技术生成

当我们在做项目的时候，会遇到这样的需求，比如说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('审核失败')
      }
    },


}

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