使用ant-design-vue如何像使用element-ui那样为form组件设置disabled属性来统一管理表单项是否禁用

实际使用ant-design-vue在开发表单的时候或许会遇到编辑与查看的需求,
但是查看的时候表单不允许编辑,ant-design-vue的官方是没有像element
一样提供全局disabled属性的,但是我们对一个一个的form-item去添加
又有一些麻烦,所以我使用了一个全局css属性才设置。
<Form v-model:value="data" :class="{ disable: type === 1 ? true : false }">
      <FormItem label="角色名称">
        <Input v-model:value="data.roleName" placeholder="请输入角色名称" allow-clear />
      </FormItem>
    </Form>

定义一个可接收的参数来判断是否为disabled,然后为dom添加class属性
给class设置一个样式就可以

.disable {
    pointer-events: none;
  }
Logo

前往低代码交流专区

更多推荐