antd校验动态表单

 

 表单新增一条相当于在数组中新增一条。其实本质是校验数组中每一项的数据。

<a-modal
      v-model:visible="visible"
      :width="900"
      :confirm-loading="modalLoading"
      title="编辑"
      :body-style="{ paddingBottom: '8px' }"
      @ok="save"
    >
      <a-form
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
        :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }"
      >
        <a-row v-for="(item,index) in form" :key="index">
          <a-form-item label="表单编码:" :name="[index, 'code']" :rules="rules.code">
            <a-input
              v-model:value="item.code"
              size="small"
              placeholder="请输入表单编码"
              allow-clear
              autocomplete="off"
            />
          </a-form-item>

          <a-button type="link" class="btnAdd" @click="addItem">
            <PlusCircleOutlined />
          </a-button>
          <a-button v-if="form.length>1" class="btnDel" type="link" danger @click="delItem(index)">
            <MinusCircleOutlined />
          </a-button>
        </a-row>
      </a-form>
</a-modal>

form: [{ code: '', code1: '', code2: '' }],
rules: {
        code: [{ required: true, message: '请输入表单编码', type: 'string', trigger: 'blur' }],
        code1: [{ required: true, message: '请输入页面路由', type: 'string', trigger: 'blur' }],
        code2: [{ required: true, message: '请输入备注', type: 'string', trigger: 'blur' }]
}

主要的就是：

:name="[index, 'code']"
校验的字段为：{message: '请输入···', field: '1.code'}