使用 this.$set 实现 Element-UI表格遍历时条件判断进行禁用操作。

使用 this.$set 实现 Element-UI表格遍历时条件判断进行禁用操作。

<el-table-column
    v-if="columns.visible('rebate')"
    prop="rebate"
    label="分佣比例"
    >
    <template slot-scope="scope">
      <el-input
        v-model="scope.row.rebate"
        placeholder="请输入分佣比例"
        :clearable="true"
        :disabled="scope.row.disabled"
      >
        <template slot="append"
          >%</template
        >
      </el-input>
    </template>
</el-table-column>


approval(row) {
  this.dialogVisible = true;
  crudCtDigitalWenpuMerchantProduct.getApply(row).then(res => {
    console.log(res);
    if (res) {
      for (const key in res) {
        res[key].rebate = (res[key].rebate * 100).toFixed(1);
        if (res[key].rebate === '0.0' && res[key].status === 0) {
          this.$set(res[key],'disabled',false);
        } else {
          this.$set(res[key],'disabled',true);
        }
      }
      this.applyList = res;
    }
  });
},

示例：

如果新增对话框和修改对话框是共用一个的话（比如使用若依框架生成的代码），那么可以根据回显过后的信息中id数据是否为空来判断是否进行禁用操作。

   <el-form-item label="工号">
        <el-input v-model="form.jobNumber" style="width: 370px;" :disabled=" form.id ? true : false"/>
   </el-form-item>