VUE中按钮和vue页面的动态渲染，同时，其他按钮联动显示禁用和不禁用

           当我们有需要，例如，按钮显示上架，页面状态显示已下架，这是修改和删除按钮是可以点击状态

当我们点击上架以后，按钮会变成下架，同时页面显示已发布，这是修改按钮和删除按钮被禁用

 效果如图所示

具体代码表示

<template>
  <el-table>
   <el-table-column label="发布状态" prop="publishState">
            <template slot-scope="scope">
              {{ scope.row.publishState === 1 ? '发布' : '已下架' }}
            </template>
          </el-table-column>
   <el-table-column label="操作" width="250" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                :disabled="scope.row.chkState === 1 || scope.row.chkState === 2"
                @click="hChkState(scope.row)"
                >审核</el-button
              >
              <el-button type="text" :disabled="scope.row.publishState === 1">修改</el-button>
              <el-button type="text" @click="hPublish(scope.row)">{{
                scope.row.publishState === 0 ? '上架' : '下架'
              }}</el-button>
              <el-button type="text" :disabled="scope.row.publishState === 1" @click="hDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
  </el-table>
</template>


<script>
export default{
 

// 点击上架,下架
    hPublish(row) {
      if (row.publishState === 0) {
        this.$confirm('你确定要上架这道题目吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            const res = await choicePublish({ id: row.id, publishState: 1 })
            this.$message.success('上架成功')
            console.log('上架', res)
            this.loadQuestion()
          } catch (err) {
            this.$message.error('上架失败')
          }
        })
      } else if (row.publishState === 1) {
        this.$confirm('你确定要下架这道题吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            const res = await choicePublish({ id: row.id, publishState: 0 })
            this.$message.success('下架成功')
            console.log('下架', res)
            this.loadQuestion()
          } catch (err) {
            this.$message.error('下架失败')
          }
        })
      }
    },

}
</script>