element-ui禁用指定行

假设你有一个表单，其中包含多个输入框和按钮，你想要禁用表单中的某些输入框和按钮。

<template>
  <el-form :model="form" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" :disabled="isDisabled('username')" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password" :disabled="isDisabled('password')" />
    </el-form-item>
    <el-form-item>
      <el-button @click="submit" :disabled="isDisabled('submit')">提交</el-button>
      <el-button @click="reset" :disabled="isDisabled('reset')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      disabledFields: ['username', 'submit'] // 要禁用的字段
    };
  },
  methods: {
    isDisabled(field) {
      return this.disabledFields.includes(field);
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交表单
        }
      });
    },
    reset() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

改进：编辑/新增/……多弹框公用一个表单禁用行不一样

//html
<el-divider content-position="left"><span style="font-size: 18px;font-weight:600;">规格信息</span></el-divider>
              <el-form-item label="规格名称" prop="coupon_sku_name">
                <el-input v-model="couponForm.coupon_sku_name" autocomplete="off" :disabled="isDisabled('coupon_sku_name')"></el-input>
              </el-form-item>
              <el-form-item label="实际支付价格" prop="price">
                <el-input v-model="couponForm.price" autocomplete="off" :disabled="isDisabled('price')"></el-input>
              </el-form-item>
              <el-form-item label="原价" prop="original_price">
                <el-input v-model="couponForm.original_price" autocomplete="off" :disabled="isDisabled('original_price')"></el-input>
              </el-form-item>


//data
addOrEditLimits: [],//新增或编辑禁用名单
freeLimits: ['stock_name','available_begin_time','coupon_sku_name','price','original_price','stock_type', 'tiktok_store_id_gather','images','use_date_type','day_duration','use_start_date','use_end_date','is_limit','total_buy_num'],//免审修改商品禁用名单
stockLimits: ['stock_name','available_begin_time','available_end_time','coupon_sku_name','price','original_price',
                            'tiktok_store_id_gather','images','use_date_type','day_duration','use_start_date','use_end_date','is_limit','total_buy_num'],//同步库存禁用名单
disabledList: [],//最终禁用名单

//methods
// 打开弹框
            openDialog(type,row) {
                this.dialogType = type;
                switch (type) {
                    case 'add':
                        this.disabledList = this.addOrEditLimits;
                        this.couponDialogTitle = '新增代金券';
                        this.couponDialog = true;
                        break;
                    case 'edit':
                        this.disabledList = this.addOrEditLimits;
                        this.couponDialogTitle = '编辑代金券';
                        this.backfillCoupon(row);
                        break;
                    case 'free':
                        this.disabledList = this.freeLimits;
                        this.couponDialogTitle = '修改商品';
                        this.backfillCoupon(row);
                        break;
                    case 'stock':
                        this.disabledList = this.stockLimits;
                        this.couponDialogTitle = '同步库存';
                        this.backfillCoupon(row);
                        break;
                
                    default:
                        break;
                }
            },

isDisabled(field) {
                return this.disabledList.includes(field);
            },