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