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.js的模板语法详解
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。这篇文章重点给大家介绍Vue.js的模板语法，感兴趣的朋友跟随小编一起看看吧
2020-02-02
详解Vue-cli webpack移动端自动化构建rem问题
这篇文章主要介绍了详解Vue-cli webpack移动端自动化构建rem问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
一文带你理解 Vue 中的生命周期
在我们实际项目开发过程中，会非常频繁地和 Vue 组件的生命周期打交道，接下来我们就从源码的角度来看一下这些生命周期的钩子函数是如何被执行的,需要的朋友可以参考下面文章内容
2021-09-09
完美解决vue中报错 “TypeError: Cannot read properties of null
这篇文章主要介绍了完美解决vue中报错 “TypeError: Cannot read properties of null (reading ‘forEach‘)“,本文给大家分享详细解决方案，需要的朋友可以参考下
2023-02-02
vue组件开发之slider组件使用详解
这篇文章主要为大家详细介绍了vue组件开发之slider组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
如何在Vue中实现Svelte的Defer Transition
这篇文章主要介绍了如何在Vue中实现Svelte的Defer Transition，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下
2021-04-04
Vue2.0 vue-source jsonp 跨域请求
这篇文章主要介绍了Vue2.0 vue-source jsonp 跨域请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
关于vue-router的beforeEach无限循环的问题解决
本篇文章主要介绍了关于vue-router的beforeEach无限循环的问题解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
vue2.0 实现导航守卫的具体用法（路由守卫）
这篇文章主要介绍了vue2.0 实现导航守卫的具体用法（路由守卫），vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
Vue3新特性Suspense和Teleport应用场景分析
本文介绍了Vue2和Vue3中的Suspense用于处理异步请求的加载提示,以及如何在组件间实现动态加载,同时,Teleport技术展示了如何在DOM中灵活地控制组件的渲染位置,解决布局问题,感兴趣的朋友跟随小编一起看看吧
2024-07-07