ant-design-vue的form表單全局禁用不生效問題及解決
更新時間：2026年03月06日 09:04:36 作者：小馬甲丫
文章描述了在使用ant-design-vue開發(fā)表單時遇到的編輯與查看需求,由于官方沒有提供全局disabled屬性,作者通過自定義CSS類來實現(xiàn)表單項的禁用狀態(tài),文章還提到,從ant-design-vue 4.0開始,官方支持在a-form組件上直接設置disabled屬性,從而簡化了操作
一、問題
? 實際使用ant-design-vue在開發(fā)表單的時候或許會遇到編輯與查看的需求，但是查看的時候表單不允許編輯，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 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統(tǒng)。這篇文章重點給大家介紹Vue.js的模板語法，感興趣的朋友跟隨小編一起看看吧2020-02-02
詳解Vue-cli webpack移動端自動化構建rem問題
這篇文章主要介紹了詳解Vue-cli webpack移動端自動化構建rem問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
在我們實際項目開發(fā)過程中，會非常頻繁地和 Vue 組件的生命周期打交道，接下來我們就從源碼的角度來看一下這些生命周期的鉤子函數是如何被執(zhí)行的,需要的朋友可以參考下面文章內容2021-09-09
完美解決vue中報錯?“TypeError:?Cannot?read?properties?of?null?
這篇文章主要介紹了完美解決vue中報錯?“TypeError:?Cannot?read?properties?of?null?(reading?‘forEach‘)“,本文給大家分享詳細解決方案，需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了vue組件開發(fā)之slider組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
如何在Vue中實現(xiàn)Svelte的Defer Transition
這篇文章主要介紹了如何在Vue中實現(xiàn)Svelte的Defer Transition，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了Vue2.0 vue-source jsonp 跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
關于vue-router的beforeEach無限循環(huán)的問題解決
本篇文章主要介紹了關于vue-router的beforeEach無限循環(huán)的問題解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
vue2.0 實現(xiàn)導航守衛(wèi)的具體用法（路由守衛(wèi)）
這篇文章主要介紹了vue2.0 實現(xiàn)導航守衛(wèi)的具體用法（路由守衛(wèi)），vue-route 提供的 beforeRouteUpdate 可以方便地實現(xiàn)導航守衛(wèi)（navigation-guards），具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
Vue3新特性Suspense和Teleport應用場景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請求的加載提示,以及如何在組件間實現(xiàn)動態(tài)加載,同時,Teleport技術展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問題,感興趣的朋友跟隨小編一起看看吧2024-07-07