el-form设置全局disabled属性之后，子组件怎么设置disabled属性?

Z时代
2024-02-21
分类：IT

 <el-form ref="form" :model="sizeForm" label-width="80px" size="mini" :disabled="true">
  <el-form-item label="活动名称">
    <el-input v-model="sizeForm.name"></el-input>
  </el-form-item>
 <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc" :disabled="false"></el-input>
  </el-form-item></el-form>

因为el-form设置了全局了disabled属性属性，活动形式项设置的:disabled="false"设置失效了，有什么方法可以使得子项设置的:disabled="false"生效？

尝试了在el-form-item外面包裹一层el-from,虽然设置的:disabled="false"属性可以生效了，但是由于又包裹了一层el-from。校验会出问题

<el-form>
<el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc" :disabled="false"></el-input>
  </el-form-item></el-form>

回答：

注意看文档中的解释：

el-form设置全局disabled属性之后，子组件怎么设置disabled属性?

所以就是一个一个给表单内组件做 disabled，而不是给整个 form 表单做 disabled。

因为组件内部是这样做的处理 ?

// el-input
export default {
  name: 'ElInput',
  //...
  computed: {
    //...
    inputDisabled() {
      return this.disabled || (this.elForm || {}).disabled;
    },
  }}

element/packages/input/src/input.vue at dev · ElemeFE/element

所以即使组件的 :disabled="false" 而 form 表单设置了 :disalbed="true"，按照或(||)的判断逻辑组件依旧会被禁用。