antd+vue實(shí)現(xiàn)動(dòng)態(tài)驗(yàn)證循環(huán)屬性表單的思路
希望實(shí)現(xiàn)查詢表單的某些屬性可以循環(huán)驗(yàn)證必填項(xiàng):
需求:
1.名稱,對(duì)比項(xiàng),備注必填,默認(rèn)為一行,可增加多行
2.根據(jù)名稱,動(dòng)態(tài)請(qǐng)求對(duì)比項(xiàng)列表,名稱變化時(shí),清空該行當(dāng)前選擇的對(duì)比項(xiàng)
思路:將整個(gè)搜索分成了兩個(gè)表單,分別去做驗(yàn)證。一個(gè)是可動(dòng)態(tài)添加的循環(huán)表單form,另一個(gè)為普通表單dateForm

html
<a-form :form="form" @keyup.enter.native='searchQuery'>
<div class="dynamic-wrap">
<div v-for="(item,index) in formList" :key="index">
<a-row :gutter="24">
<a-col :span="6">
<a-form-item label="名稱" :labelCol="{span: 7}" :wrapperCol="{span: 17}">
<a-select placeholder='請(qǐng)選擇名稱'
v-decorator="[`equipment[${index}]`,{ initialValue: formList[index] ? formList[index].equipment : '', rules: [{ required: true, message: '請(qǐng)選擇設(shè)備!' }]}]"
@change="(e)=>equipChange(e,index)">
<a-select-option v-for='options in formList[index].eqpList' :key='options.name' :value='options.name'>
{{ options.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="對(duì)比項(xiàng)" :labelCol="{span: 7}" :wrapperCol="{span: 17}">
<a-select
placeholder="請(qǐng)選擇對(duì)比項(xiàng)"
v-decorator="[`dataCode[${index}]`,{initialValue: formList[index] ? formList[index].dataCode : '',rules: [{ required: true, message: '請(qǐng)選擇對(duì)比項(xiàng)!' }]}]">
<a-select-option v-for='option in formList[index].dataTypeList' :key='option.name' :value='option.name'>
{{ option.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="備注" :labelCol="{span: 6}" :wrapperCol="{span: 18}">
<a-input v-decorator="[`remark[${index}]`]" placeholder="請(qǐng)輸入備注"></a-input>
</a-form-item>
</a-col>
<a-col :span="2" style="padding-left: 0px">
<a-form-item :labelCol="{span: 0}" :wrapperCol="{span: 24}">
<template v-if="formList.length > 1">
<a-icon type="delete" @click="removeRow(index)"/>
</template>
</a-form-item>
</a-col>
</a-row>
</div>
</div>
</a-form>
<a-form :form="dateForm" inline @keyup.enter.native='searchQuery'>
<a-form-item label='查詢?nèi)掌? :labelCol="{span: 8}" :wrapperCol="{span: 16}"
style="display: inline-block;width: 300px;">
<a-date-picker
style="width: 200px;"
class='query-group-cust'
v-decorator="['startTime', { rules: [{ required: true, message: '請(qǐng)選擇開(kāi)始時(shí)間!' }] }]"
:disabled-date='disabledStartDate'
format='YYYY-MM-DD'
placeholder='請(qǐng)選擇開(kāi)始時(shí)間'
@change='handleStart($event)'
@openChange='handleStartOpenChange'></a-date-picker>
</a-form-item>
<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
<a-form-item style="display: inline-block;width: 200px;">
<a-date-picker
style="width: 200px;"
class='query-group-cust'
v-decorator="['endTime', { rules: [{ required: true, message: '請(qǐng)選擇結(jié)束時(shí)間!' }] }]"
:disabled-date='disabledEndDate'
format='YYYY-MM-DD'
placeholder='請(qǐng)選擇結(jié)束時(shí)間'
@change='handleEnd($event)'
:open='endOpen'
@openChange='handleEndOpenChange'></a-date-picker>
</a-form-item>
<span style="margin-left: 10px">
<a-button type='primary' :disabled='loading' @click='searchQuery' icon='search'>查詢</a-button>
<a-button type='primary' @click='searchReset' icon='search' style='margin-left:10px'>重置</a-button>
<a-button type="primary" icon="plus" @click="addRow" style='margin-left:10px'>新增查詢條件</a-button>
</span>
</a-form>
<p>查詢條件為:{{searchData}}</p>
js
initForm() {
// 首先請(qǐng)求設(shè)備列表,存放在eqpList中
// 初始化form表單
this.formList.push({
equipment: '',
dataCode: '',
remark: '',
eqpList: this.eqpList,
dataTypeList: []
})
},
// 刪除一行
handleRemove(index) {
if (this.formList.length === 1) {
return
}
this.formList.splice(index, 1)
},
// 新增一行
handleAdd() {
this.formList.push({
equipment: '',
dataCode: '',
remark: '',
eqpList: this.eqpList, // 可以根據(jù)接口動(dòng)態(tài)獲取,這里便于演示,直接賦值了
dataTypeList: [],// 可以根據(jù)接口動(dòng)態(tài)獲取并根據(jù)設(shè)備去關(guān)聯(lián)
})
},
equipChange(value, index) {
// change賦值
this.formList[index].equipment = value;
//同步更新 當(dāng)前選擇的設(shè)備對(duì)應(yīng)的對(duì)比項(xiàng)列表
this.handleEqpIdentity(value, index)
},
// 根據(jù)設(shè)備查詢對(duì)應(yīng)的對(duì)比項(xiàng)列表
handleEqpIdentity(value, index) {
this.dataTypeList = []; //清空dataTypeList
this.formList[index].dataTypeList = []; // 清空當(dāng)前行的 dataTypeList
//根據(jù)新的設(shè)備名稱 獲取對(duì)應(yīng)的對(duì)比項(xiàng)列表
getAction(this.url.getDataTypeList, {equipment: value})
.then((res) => {
if (res.success) {
this.dataTypeList = res.result;
this.formList[index].dataTypeList = this.dataTypeList;
// this.formList[index].dataCode = ''; 直接賦值為空 是無(wú)效的
//需使用 getFieldValue, setFieldsValue
let dataCode1Arr = this.form.getFieldValue('dataCode');
if (dataCode1Arr.length !== 0) {
dataCode1Arr[index] = ''
}
this.form.setFieldsValue({dataCode: dataCode1Arr})
} else {
this.$message.warning(res.message)
}
})
.catch(() => {
this.$message.error('獲取失敗,請(qǐng)重試!')
})
},
// 點(diǎn)擊查詢
searchQuery() {
// 先驗(yàn)證循環(huán)表單
const {form: {validateFields}} = this
validateFields((error, values) => {
if (!error) {
this.dateForm.validateFields((dateErr, dateValues) => {
//再驗(yàn)證日期搜索表單
dateValues.startTime = moment(dateValues.startTime).format('YYYY-MM-DD')
dateValues.endTime = moment(dateValues.endTime).format('YYYY-MM-DD')
if (!dateErr) {
this.loading = true;
let formData = Object.assign({}, dateValues);
//整理成后臺(tái)所需的數(shù)據(jù)結(jié)構(gòu)
// 循環(huán)表單
let searchArr = [];
(values[`equipment`]).forEach((item, index) => {
const obj = {
equipment: item,
remark: values[`remark`][index],
dataCode: values[`dataCode`][index]
}
searchArr.push(obj);
})
// 日期表單
if (!dateValues.startTime) {
formData.startTime = moment(new Date()).format('YYYY-MM-DD')
}
formData.eqpInfoParamVoList = searchArr;
this.searchData = JSON.parse(formData)
// 請(qǐng)求接口
}
})
}
})
},
到此這篇關(guān)于antd vue實(shí)現(xiàn)動(dòng)態(tài)驗(yàn)證循環(huán)屬性表單的文章就介紹到這了,更多相關(guān)antd vue動(dòng)態(tài)驗(yàn)證循環(huán)屬性表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Vue開(kāi)發(fā)過(guò)程中解決和預(yù)防內(nèi)存泄漏問(wèn)題的方法詳解
Vue作為一款流行的前端框架,已經(jīng)在許多項(xiàng)目中得到廣泛應(yīng)用,然而,隨著我們?cè)赩ue中構(gòu)建更大規(guī)模的應(yīng)用程序,我們可能會(huì)遇到一個(gè)嚴(yán)重的問(wèn)題,那就是內(nèi)存泄漏,因此,我們需要認(rèn)識(shí)到在Vue開(kāi)發(fā)過(guò)程中,內(nèi)存泄漏問(wèn)題的重要性,本文將給大家介紹如何解決和預(yù)防內(nèi)存泄漏問(wèn)題2023-10-10
uniapp 小程序和app map地圖上顯示多個(gè)酷炫動(dòng)態(tài)的標(biāo)點(diǎn)效果(頭像后端傳過(guò)來(lái))
這篇文章主要介紹了uniapp 小程序和app map地圖上顯示多個(gè)酷炫動(dòng)態(tài)的標(biāo)點(diǎn)效果(頭像后端傳過(guò)來(lái)),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
解決vue打包后vendor.js文件過(guò)大問(wèn)題
這篇文章主要介紹了解決vue打包后vendor.js文件過(guò)大問(wèn)題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
詳解mpvue scroll-view自動(dòng)回彈bug解決方案
設(shè)置了scroll-top的scroll-view組件,在組件所在vue實(shí)例data發(fā)生改變時(shí)會(huì)自動(dòng)回彈到最上方,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-10-10
vue-resource 攔截器(interceptor)的使用詳解
本篇文章主要介紹了vue-resource 攔截器(interceptor)的使用詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07

