list类型
<el-card class="box-card" v-for="(item,index) in form.fishTimeArr" :key="index">
<h3>{{item.name}}</h3>
<el-form-item label="开始时间"
:prop="`fishTimeArr[${index}].startTime`"
:rules="{ required: true, message: '请选择开始时间', trigger: 'change' }">
<template>
<el-date-picker
v-model="item.startTime"
type="datetime"
placeholder="选择日期时间"
/>
</template>
</el-form-item>
</el-card>
:prop="`fishTimeArr[${index}].startTime`"
${index}是变量,这样这个prop就不会有重复的
多层级
<el-form-item label="开始时间" prop="form.startTime" >
<template>
<el-date-picker
v-model="form.startTime"
type="datetime"
placeholder="选择日期时间"
/>
</template>
</el-form-item>
export default {
data() {
return {
rules: {
form:{
startTime:[
{required: true, message: '请选择开始时间', trigger: 'change'}
],
},
//或者
//必须要引号
'form.startTime':[
{required: true, message: '请选择开始时间', trigger: 'change'}
],
}
}
},
}
本文介绍了如何在Vue表单提交时,针对list类型的字段进行非空判断,特别是涉及到多层级结构的情况。通过使用`:prop="`fishTimeArr[${index}].startTime`"`的方式,确保每个list元素的startTime属性都能被正确地检测到。

被折叠的 条评论
为什么被折叠?



