Vue3中使用TDesign添加动态表单校验_t-form-item

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25