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

作者站长头像
站长
· 阅读数 9

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>
回复
1个回答
avatar
test
2024-06-23

注意看文档中的解释：

answer image

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容