ant-design-vue的form表单全局禁用不生效问题及解决
作者：小马甲丫
文章描述了在使用ant-design-vue开发表单时遇到的编辑与查看需求,由于官方没有提供全局disabled属性,作者通过自定义CSS类来实现表单项的禁用状态,文章还提到,从ant-design-vue 4.0开始,官方支持在a-form组件上直接设置disabled属性,从而简化了操作
一、问题
实际使用ant-design-vue在开发表单的时候或许会遇到编辑与查看的需求，但是查看的时候表单不允许编辑，ant-design-vue的官方是没有像element一样提供全局disabled属性的，但是我们对一个一个的form-item去添加又有一些麻烦，所以我使用了一个全局css属性才设置。
二、解决
2.1、4.0之前的版本
<Form v-model:value="data" :class="{ disable: type === 1 ? true : false }">
<FormItem label="表单">
<Input v-model:value="data.item" placeholder="请输入表单" allow-clear />
</FormItem>
</Form>
定义一个可接收的参数来判断是否为disabled，然后为dom添加class属性，给class设置一个样式就可以
.disable {
pointer-events: none;
}
2.2、4.0开始的版本
可以看到官网的说明，4.0版本之后才支持在a-form上设置disabled属性
<Form v-model:value="data" :disabled="true">
<FormItem label="表单">
<Input v-model:value="data.item" placeholder="请输入表单" allow-clear />
</FormItem>
</Form>
三、最后
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。