全栈之路:Ant Design of Vue 学习(2)-表单from

ant组件from的使用，ant表单中组件简单使用参考:https://www.antdv.com/components/form-cn/
简单案例：1.表单的校验 2.赋值

<template>
  <a-form
    :form="form"
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 12 }"
    @submit="handleSubmit"
  >
    <a-form-item label="姓名">
      <a-input v-decorator="['username', validatorRules.username]" />
    </a-form-item>
    <a-form-item label="性别">
      <a-select
        v-decorator="[
          'gender',
          {
            rules: [{ required: true, message: 'Please select your gender!' }],
          },
        ]"
        placeholder="请选择性别"
        @change="handleSelectChange"
      >
        <a-select-option value="male"> male </a-select-option>
        <a-select-option value="female"> female </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit"> Submit </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  computed: {
    validatorRules: function () {
      return {
        //rules：校验规则  initialValue：值，默认是空
        username: {
          rules: [{ required: true, message: "请输入名字!" }],
          initialValue: "",
        },
      };
    },
  },
  created() {
    //页面渲染是赋值方式1
    this.validatorRules.username.initialValue = "张三";
  },
  methods: {
    //sumbit事件
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          //表单form的内容,请求接口使用
          console.log(" form: ", values);
        }
      });
    },
    //下拉选择事件
    handleSelectChange(value) {
      console.log(value);
      //赋值方式2:
      this.form.setFieldsValue({
        username: `Hi, ${value === "male" ? "man" : "lady"}!`,
      });
    },
  },
};
</script>

表单校验效果：