1、复杂表单校验
复杂类型的数据(两级数组)
const dataForm = ref({configTalkTemplateProblemCoList: [{"id":"1744302859557920769","templateId":"1744302859511783426","parentId":null,"level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":[{"id":"1744302859591475201","templateId":"1744302859511783426","parentId":"1744302859557920769","problem":"问题1","level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":null},{"id":"1744302859620835330","templateId":"1744302859511783426","parentId":"1744302859557920769","problem":"问题2","level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":null}],"classify":"分类一"},{"id":"1744302859658584065","templateId":"1744302859511783426","parentId":null,"level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":[{"id":"1744302859687944194","templateId":"1744302859511783426","parentId":"1744302859658584065","problem":"问题1","level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":null},{"id":"1744302859755053057","templateId":"1744302859511783426","parentId":"1744302859658584065","problem":"问题2","level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":null}],"classify":"分类2"}
]
})
表单写法
<t-formref="formRef":data="dataForm":rules="dataRules"label-width="100px"label-align="right"reset-type="initial"@submit="onSubmit"><div class="question" v-for="(item, index) in dataForm.configTalkTemplateProblemCoList" :key="item.id" :label-width="0"><div class="content br12"><t-form-item label="问题分类" :name="`configTalkTemplateProblemCoList[${index}].classify`" requiredMark><t-input v-model="item.classify" placeholder="请输入问题分类" style="width: 400px" :readonly="props.isView"></t-input></t-form-item><t-form-item v-for="(v, i) in item.list" :key="v.id" label="问题" :name="`configTalkTemplateProblemCoList[${index}].list[${i}].problem`" requiredMark><t-textarea v-model="v.problem" placeholder="请输入问题" style="width: 400px" :readonly="props.isView"></t-textarea></t-form-item></div></div>
</t-form>
表单校验
const dataRules = {classify: [{ required: true, message: '请输入问题分类', type: 'error', trigger: 'blur' }],problem: [{ required: true, message: '请输入问题', type: 'error', trigger: 'blur' }],
};
注意:重点就是name属性必须是你的数据的属性开头,如configTalkTemplateProblemCoList,如果不用configTalkTemplateProblemCoList,直接用item或者v,是不行的。