今天通过本文给大家分享antd+vue实现动态验证循环属性表单的思路，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
希望实现查询表单的某些属性可以循环验证必填项：
需求：
1.名称，对比项，备注必填，默认为一行，可增加多行
2.根据名称，动态请求对比项列表，名称变化时，清空该行当前选择的对比项
思路：将整个搜索分成了两个表单，分别去做验证。一个是可动态添加的循环表单form，另一个为普通表单dateForm
html
{{ options.name }} {{ option.name }} - 查询 重置 新增查询条件 查询条件为：{{searchData}}
js
initForm() { // 首先请求设备列表，存放在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, // 可以根据接口动态获取，这里便于演示，直接赋值了 dataTypeList: [],// 可以根据接口动态获取并根据设备去关联 }) }, equipChange(value, index) { // change赋值 this.formList[index].equipment = value; //同步更新 当前选择的设备对应的对比项列表 this.handleEqpIdentity(value, index) }, // 根据设备查询对应的对比项列表 handleEqpIdentity(value, index) { this.dataTypeList = []; //清空dataTypeList this.formList[index].dataTypeList = []; // 清空当前行的 dataTypeList //根据新的设备名称 获取对应的对比项列表 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 = ''; 直接赋值为空 是无效的 //需使用 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('获取失败，请重试！') }) }, // 点击查询 searchQuery() { // 先验证循环表单 const {form: {validateFields}} = this validateFields((error, values) => { if (!error) { this.dateForm.validateFields((dateErr, dateValues) => { //再验证日期搜索表单 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); //整理成后台所需的数据结构 // 循环表单 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) // 请求接口 } }) } }) },以上就是antd+vue实现动态验证循环属性表单的思路的详细内容，更多请关注0133技术站其它相关文章！
