ant-design-vue的form表單全局禁用不生效問(wèn)題及解決
更新時(shí)間：2026年03月06日 09:04:36 作者：小馬甲丫
文章描述了在使用ant-design-vue開(kāi)發(fā)表單時(shí)遇到的編輯與查看需求,由于官方?jīng)]有提供全局disabled屬性,作者通過(guò)自定義CSS類來(lái)實(shí)現(xiàn)表單項(xiàng)的禁用狀態(tài),文章還提到,從ant-design-vue 4.0開(kāi)始,官方支持在a-form組件上直接設(shè)置disabled屬性,從而簡(jiǎn)化了操作
一、問(wèn)題
? 實(shí)際使用ant-design-vue在開(kāi)發(fā)表單的時(shí)候或許會(huì)遇到編輯與查看的需求，但是查看的時(shí)候表單不允許編輯，ant-design-vue的官方是沒(méi)有像element一樣提供全局disabled屬性的，但是我們對(duì)一個(gè)一個(gè)的form-item去添加又有一些麻煩，所以我使用了一個(gè)全局css屬性才設(shè)置。
二、解決
2.1、4.0之前的版本
<Form v-model:value="data" :class="{ disable: type === 1 ? true : false }">
<FormItem label="表單">
<Input v-model:value="data.item" placeholder="請(qǐng)輸入表單" allow-clear />
</FormItem>
</Form>
定義一個(gè)可接收的參數(shù)來(lái)判斷是否為disabled，然后為dom添加class屬性，給class設(shè)置一個(gè)樣式就可以
.disable {
pointer-events: none;
}
2.2、4.0開(kāi)始的版本
可以看到官網(wǎng)的說(shuō)明，4.0版本之后才支持在a-form上設(shè)置disabled屬性
<Form v-model:value="data" :disabled="true">
<FormItem label="表單">
<Input v-model:value="data.item" placeholder="請(qǐng)輸入表單" allow-clear />
</FormItem>
</Form>
三、最后
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。這篇文章重點(diǎn)給大家介紹Vue.js的模板語(yǔ)法，感興趣的朋友跟隨小編一起看看吧2020-02-02
詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問(wèn)題
這篇文章主要介紹了詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
在我們實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，會(huì)非常頻繁地和 Vue 組件的生命周期打交道，接下來(lái)我們就從源碼的角度來(lái)看一下這些生命周期的鉤子函數(shù)是如何被執(zhí)行的,需要的朋友可以參考下面文章內(nèi)容2021-09-09
完美解決vue中報(bào)錯(cuò)?“TypeError:?Cannot?read?properties?of?null?
這篇文章主要介紹了完美解決vue中報(bào)錯(cuò)?“TypeError:?Cannot?read?properties?of?null?(reading?‘forEach‘)“,本文給大家分享詳細(xì)解決方案，需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue組件開(kāi)發(fā)之slider組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
如何在Vue中實(shí)現(xiàn)Svelte的Defer Transition
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)Svelte的Defer Transition，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
Vue2.0 vue-source jsonp 跨域請(qǐng)求
這篇文章主要介紹了Vue2.0 vue-source jsonp 跨域請(qǐng)求，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
關(guān)于vue-router的beforeEach無(wú)限循環(huán)的問(wèn)題解決
本篇文章主要介紹了關(guān)于vue-router的beforeEach無(wú)限循環(huán)的問(wèn)題解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)）
這篇文章主要介紹了vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)），vue-route 提供的 beforeRouteUpdate 可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
Vue3新特性Suspense和Teleport應(yīng)用場(chǎng)景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請(qǐng)求的加載提示,以及如何在組件間實(shí)現(xiàn)動(dòng)態(tài)加載,同時(shí),Teleport技術(shù)展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問(wèn)題,感興趣的朋友跟隨小編一起看看吧2024-07-07