vue多层遍历增删和表单校验dome

vue多层遍历增删和表单校验dome，需求中可能会遇到，使用场景：遍历之后child还需要遍历可以使用一下代码块，再此记录下

<template>
	<div>
		<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
			<el-button @click="handleAdd">
				添加收货人
			</el-button>
			<el-form-item label="货物名称" prop="type">
				<el-input v-model="form.type" />
			</el-form-item>
			<div v-for="(item, index) in form.goodsDetail" :key="index">
				<el-form-item label="收货人" :prop="`goodsDetail.` + index + `.name`" :rules="rules.name">
					<el-input v-model="item.name" placeholder="请输入收货人" />
				</el-form-item>
				<div v-for="(item, index1) in form.goodsDetail[index].phoneList" :key="index1">
					<el-form ref="formRefs" :model="form.goodsDetail[index]" label-width="100px">
						<el-form-item :prop="`phoneList.${index1}.phoneName`"  label="手机号" :rules="rules.phoneName">
							<el-input v-model="item.phoneName"></el-input>
						</el-form-item>
						<el-form-item :prop="'phoneList.' + index1 + '.phoneName1'" label="手机号1" :rules="rules.phoneName1">
							<el-input v-model="item.phoneName1"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<el-button @click="onADD(index)">添加手机号</el-button>
			</div>
		</el-form>
		<el-button type="primary" @click="submit">保存</el-button>
	</div>
</template>
	
<script>
export default {
	data() {
		return {
			rules: {
				type: [
					{ required: true, message: '请输入货物名称', trigger: 'blur' },
				],
				name: [
					{ required: true, message: '请输入收货人', trigger: 'blur' },
				],
				phoneName: [
					{ required: true, message: '请输入电话', trigger: 'blur' }
				],
				phoneName1: [
					{ required: true, message: '请输入电话1', trigger: 'blur' }
				],
			},
			form: {
				type: '',
				goodsDetail: [
					{
						name: "",
						phoneList: [
							{
								phoneName: "",
								phoneName1: ""
							}
						],

					}
				]
			}
		}
	},
	methods: {
		//添加收件地址
		handleAdd() {
			let data = {
				phoneList: [
					{
						phoneName: ""
					}
				],
				site: ""
			}
			this.form.goodsDetail.push(data)
		},
		onADD(index) {
			this.form.goodsDetail[index].phoneList.push(
				{
					phoneName: ""
				}
			)
		},
		// 手机号验证
		vali1() {
			let ref = this.$refs.formRefs;
			return new Promise((resolve, reject) => {
				let arr=[]
				ref.map((row) => {
					row.validate(async (valid) => {
						arr.push(valid)
					})
				})
				setTimeout(() => {
					arr.includes(false)?reject(false):resolve(true)
				});
				
			})
		},
		// 其他验证
		vali2() {
			let ref = this.$refs.formRef;
			return new Promise((resolve, reject) => {
				ref.validate(async (valid) => {
					if (valid) resolve(true)
					else reject(false)
				})
			})
		},
		// 手机号验证
		submit() {

			Promise.all([this.vali1(), this.vali2()]).then(res => {
				console.log(res,222222)
				if (!res.includes(false)) {
					console.log('表单验证成功----请输入')
				}
			}).catch(res => {
				console.log('表单验证失败----请输入')
			})
		}
	}
}

</script>