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 clearable
size="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);
}
}