文章目录
- 一、问题
- 二、解决
- 2.1、`4.0`之前的版本
- 2.2、`4.0`开始的版本
- 三、最后
一、问题
实际使用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>
三、最后
本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注✨，一起加油☕
