html部分
注意这里的data和收集数据的动态表单要有层级关系
<t-form ref="form_ref" label-width="0" :data="form_data"><div class="flex gap-5" v-for="(item, index) in form_data.address "><t-form-item :name="`address.${index}.sub_sn`" :rules="[{ required: true },]"><t-input size="large" v-model.trim="item.sub_sn" placeholder="淘京拼订单号 没有可空"></t-input></t-form-item><t-form-item :name="`address.${index}.person`" :rules="[{ required: true },]"><t-input size="large" v-model.trim="item.person" placeholder="收件人姓名"></t-input></t-form-item><t-form-item :name="`address.${index}.mobile`" :rules="[{ required: true }, {telnumber: true, message: '请输入正确的手机号'}]"><t-input size="large" v-model.trim="item.mobile" placeholder="收件人手机号"></t-input></t-form-item><t-form-item :name="`address.${index}.province`" :rules="[{ required: true },]"><t-select class="w-28" :options="area_list" :keys="{ 'label': 'name', 'value': 'id' }" filterable clearablesize="large" v-model="item.province" placeholder="省"></t-select></t-form-item><t-form-item :name="`address.${index}.city`" :rules="[{ required: true },]"><t-select class="w-28" filterable clearable size="large" v-model="item.city" placeholder="市"></t-select></t-form-item><t-form-item :name="`address.${index}.area`" :rules="[{ required: true },]"><t-select class="w-28" filterable clearable size="large" v-model="item.area" placeholder="区"></t-select></t-form-item><t-form-item :name="`address.${index}.address`" :rules="[{ required: true },]"><t-input size="large" v-model.trim="item.address" placeholder="详细地址"></t-input></t-form-item></div>
</t-form>
js部分
// 表单相关数据
const form_data = reactive({address: [{sub_sn: "",person: "",mobile: "",province: "",city: "",area: "",address: ""}]
})
const form_ref = ref()// 提交
const submit = async () => {const check_res = await form_ref.value?.validate()if (Object.keys(check_res).length < 1) {// 检验通过后,这里就可以写逻辑了console.log(123);}
}