Antd+Vue表单提交Demo

Antd+Vue表单提交Demo

代码

<template>
  <a-form @submit="onSubmit" :form="form">
    <a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
      <a-tab-pane tab="账户密码登录" key="1">
        <a-form-item>
          <a-input
            autocomplete="autocomplete"
            size="large"
            placeholder="admin"
            v-decorator="['name', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
          >
          <a-icon slot="prefix" type="user" />
          a-input>
        a-form-item>
        <a-form-item>
          <a-input
            size="large"
            placeholder="888888"
            autocomplete="autocomplete"
            type="password"
            v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
          >
          <a-icon slot="prefix" type="lock" />
          a-input>
        a-form-item>
      a-tab-pane>
    a-tabs>
    <a-form-item>
      <a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录a-button>
    a-form-item>
  a-form>
template>

<script>
  export default {
    data() {
      return {
        logging: false,
        form: this.$form.createForm(this)
      };
    },
    mounted() {
    },
    methods: {
      onSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err) => {
          if (!err) {
            this.logging = true
            const name = this.form.getFieldValue('name')
            console.log(name)
            const password = this.form.getFieldValue('password')
            console.log(password)
          }
        })
      },
    }
  };
script>