先上效果图
![](https://i-blog.csdnimg.cn/direct/309ceffec593479ab249048c0ee4f092.png)
代码图![](https://i-blog.csdnimg.cn/direct/d07cc2f66bb441bd9e5afe8fcfdcb067.png)
<template>
<div>
<el-form :model="form.third" ref="form" :rules="rules" label-width="80px">
<div v-for="(item, index) in details" :key="index">
<template v-if="index == 0">
<el-form-item label="" :prop="'details.' + index + '.minNum'"
:rules="{ required: true, message: 'minNum不能为空', trigger: 'blur' }">
<el-input v-model="item.name1"></el-input>
</el-form-item>
</template>
<template v-else>
<el-form-item label="" :prop="'details.' + index + '.num'"
:rules="{ required: true, message: 'num不能为空', trigger: 'blur' }">
<el-input v-model="item.name2"></el-input>
</el-form-item>
</template>
</div>
<el-form-item>
<el-button type="primary" size="default" @click="getData">获取数据</el-button>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
form: {
third: {
details: []
}
},
rules: {}
};
},
computed: {
details() {
return this.form.third.details
},
},
methods: {
async getData() {
const res = await fetch('https://jsonplaceholder.typicode.com/users').then(response => response.json()).then(json => { return json })
console.log(res);
this.form.third.details = res.slice(0, 3).map((item, index) => {
if (index == 0) {
return {
minNum: null
}
} else {
return {
num: null,
}
}
})
// 再次校验 arr 中所有的 name
this.$nextTick(() => {
this.form.third.details.forEach((_, index) => {
if(index == 0) {
this.$refs.form.validateField('details.' + index + '.minNum');
} else {
this.$refs.form.validateField('details.' + index + '.num');
}
});
})
},
onSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log(valid);
} else {
console.log(valid);
return false;
}
});
}
},
async created() {
},
mounted() {
},
};
</script>