复杂类型的数据(两级数组)
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-form
ref="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,是不行的。