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

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

 <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>
阅读 450
2 个回答

注意看文档中的解释:

图片.png

所以就是一个一个给表单内组件做 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",按照或(||)的判断逻辑组件依旧会被禁用。

el-form设置了全局了disabled属性后,属于这个form内的所有表单就会被禁用,如果需要单独在控制某个表单,可以在该 el-form-item 内部嵌套一个新的 el-form

推荐问题
宣传栏