ant-design-vue的form表单全局禁用不生效问题及解决

更新时间：2026年03月06日 09:04:36 作者：小马甲丫

文章描述了在使用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>

三、最后

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue配合iView实现省市二级联动的示例代码
本篇文章主要介绍了Vue配合iView实现省市二级联动的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
前端vue中文件下载的三种方式汇总
对于Vue中实现一般的下载功能很简单,下面这篇文章主要给大家介绍了关于前端vue中文件下载的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-02-02
vue,angular,avalon这三种MVVM框架优缺点
本文给大家具体分析了下vue,angular,avalon这三种MVVM框架优缺点，十分的细致全面，有需要的小伙伴可以参考下
2016-04-04
vue-cli中的webpack配置详解
本篇文章主要介绍了vue-cli中的webpack配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue3中的事件总线详解
在Vue3中,推荐使用CompositionAPI和第三方库mitt来实现事件总线,而不是Vue2中使用Vue实例的方式
2026-01-01
vue中的Object.freeze() 优化数据方式
这篇文章主要介绍了vue中的Object.freeze()优化数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue-cli3使用 DllPlugin 实现预编译提升构建速度
这篇文章主要介绍了vue-cli3使用 DllPlugin 实现预编译提升构建速度 ,需要的朋友可以参考下
2019-04-04
Vue入门之数据绑定(小结)
本篇文章主要介绍了探索Vue高阶组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue3如何将html元素变成canvas(海报生成),进行图片保存/截图
这篇文章主要介绍了vue3实现将html元素变成canvas(海报生成),进行图片保存/截图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
利用Vue实现移动端图片轮播组件的方法实例
轮播图是前端很常用的一个网页特效，几乎所有的网站或多或少都会用到这个特效。下面这篇文章主要给大家介绍了关于利用Vue实现移动端图片轮播组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
2017-08-08