element ui 表格每一个column的按钮设置禁用状态

按钮如下要求:点击哪一行的确认就把确认和驳回按钮变为禁用状态

img

 <el-button size="mini" @click="handleCertification(scope.row,scope.$index)" 
:disabled="scope.row.check==true"
>确认
</el-button>
<el-button size="mini" @click="cancelCertification(scope.row,scope.$index)" 
:disabled="scope.row.check"
  >驳回 




 handleCertification(value,index) {
      console.log(index,value)
      let params = {
        status:3
      }
       updateState(value.id,params).then(response=>{
         if (response.status == 200) {
           this.$message.success('确认成功');
           this.tableData[index].check = true;
          //  this.ableEdit = true;
         }else{
           this.$message.error(response.Message)
         }

img

我在data里面定义了check然后给表格的数组添加了check属性,在点击的时候把他变成true,然后disabled里面写上了scope.row.check == true,但是这样并没有生效,求详细解释

在获取tableData的数据时做一次处理,设置check的值,这样写


```bash
this.tableData.forEach((item,index) => {
  this.$set(this.tableData[index], 'check', true) // true或false根据默认值自己修改一下
})

```

你可以使用disabled属性来定义按钮是否可用,它接受一个Boolean值。

你每一行都需要单独的控制的,因此你在data里边只定义一个check是没用的,而且scope.row.check拿到的不是你在data里边定义的这个check 而是列表中每行数据对象上的check属性。
建议如下:

  1. 在data中定义一个和表行数一样长的数组,用于标识是否选中。然后在点击确定的时候相应的改其值。
  2. 在用于渲染列表的数据中,每行都有一个check属性,初始值为false,点击确定后改成 true。用来控制button状态。