el-table点击禁用按钮，只禁用本行的编辑按钮，不影响其他行

el-table点击禁用按钮，只禁用本行的编辑按钮，不影响其他行

1、效果如图所示

2、html部分：这里控制禁用，启用，以及编辑按钮是否可用的字段都要写在list里面

//这里控制禁用，启用，以及编辑按钮是否可用都要写在list里面
	<el-table-column prop="operate" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="confirmEdit" :disabled='scope.row.isEdit'>编辑</el-button>//这里的isEdit必须写成这样
            <el-button v-if="scope.row.isForbid" type="text" @click="forbidBtn(scope.row,scope.$index)">禁用</el-button>
            <el-button v-else type="text" @click="allowBtn(scope.row,scope.$index)">已禁用</el-button>//currentIndex为本行的index,控制不同行的
          </template>
        </el-table-column>

3、data部分：

      UserManagementTableData: [
        {
          number: '1',
          username: '张三',
          department: '研发部',
          roles: '管理员',
          lastLogin: '2021/01/01',
          newHandle: '上传文件‘xxx’',
          operate:'1',
          isEdit:false,//是否可编辑
          isForbid:true,//是否禁用
        },
        {
          number: '1',
          username: '张三',
          department: '研发部',
          roles: '管理员',
          lastLogin: '2021/01/01',
          newHandle: '上传文件‘xxx’',
          operate:'1',
          isEdit:false,
          isForbid:true,
        },
      ],

3、js部分：此处的this.$set(‘表单名称’，‘要修改的字段（必须是本行的），‘要改变成的值’’)，此处参考这篇文章

    //禁用
    forbidBtn(row,currentIndex){ //currentIndex为本行的index,控制不同行的
      this.$set(this.UserManagementTableData[currentIndex],'isEdit',true);
      this.$set(this.UserManagementTableData[currentIndex],'isForbid',false);
    },
    //启用
    allowBtn(row,currentIndex){
      this.$set(this.UserManagementTableData[currentIndex],'isEdit',false);
      this.$set(this.UserManagementTableData[currentIndex],'isForbid',true);
    }

4、关于this.$set()可参考官网vue 官网 。