ant-design-vue的form表单全局禁用不生效

一、问题

​ 实际使用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>

三、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞收藏关注✨，一起加油☕