Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能
更新時(shí)間：2022年12月24日 10:29:11 作者：JackieDYH
這篇文章主要介紹了Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
源碼
<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
<a-form-model-item ref="zcfl" label="資產(chǎn)分類" prop="zcfl">
<!-- <a-input style="width: 60%" v-model="form.zcfl" /> -->
<a-form-model-item
:prop="'zcfl.' + index + '.value'"
:rules="{
required: true,
message: '請(qǐng)輸入內(nèi)容',
trigger: 'blur',
}"
v-for="(domain, index) in form.zcfl"
:key="domain.key"
>
<a-input v-model="domain.value" style="width: 40%; margin-right: 8px" />
<a-icon
v-if="form.zcfl.length > 1"
class="dynamic-delete-button"
type="minus-circle-o"
:disabled="form.zcfl.length === 1"
@click="removeDomain(domain)"
/>
</a-form-model-item>
<a-button type="dashed" style="width: 30%" @click="addDomain"> <a-icon type="plus" /> 添加分類 </a-button>
</a-form-model-item>
</a-form-model>data
form: {
zcfl: [{ value: undefined, key: 1 }], //資產(chǎn)分類
},
rules: {
zcfl: [{ required: true, message: '請(qǐng)輸入!', trigger: 'blur' }],
},添加邏輯
// 添加分類
removeDomain(item) {
let index = this.form.zcfl.indexOf(item)
if (index !== -1) {
this.form.zcfl.splice(index, 1)
}
},
addDomain() {
this.form.zcfl.push({
value: '',
key: Date.now(),
})
},到此這篇關(guān)于Vue使用antd組件a-form-model-實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加的文章就介紹到這了,更多相關(guān)Vue數(shù)據(jù)連續(xù)添加內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3如何實(shí)現(xiàn)單點(diǎn)登錄問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue抽出組件并傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞
在前端開(kāi)發(fā)中,Vue.js 是一個(gè)非常流行的框架,因其易學(xué)易用而受到許多開(kāi)發(fā)者的青睞,其中,組件是 Vue 的核心概念之一,組件之間的數(shù)據(jù)傳遞是開(kāi)發(fā)中的常見(jiàn)需求,本文將探討如何在 Vue 中實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2024-11-11
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細(xì)介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
這篇文章主要介紹了vue2中使用AntV?以g2plot為實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue使用v-bind動(dòng)態(tài)綁定CSS樣式
這篇文章給大家介紹了Vue使用v-bind動(dòng)態(tài)綁定CSS樣式,文中有相關(guān)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要為大家介紹了Vue3插槽Slot實(shí)現(xiàn)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue-router定義元信息meta操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
vue 綁定使用 touchstart touchmove touchend解析
這篇文章主要介紹了vue 綁定使用 touchstart touchmove touchend解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03