Avue中表单如何书写

在 Avue 中书写表单，一般需要以下几个步骤：

1. 引入 Avue 组件库和样式文件

import Avue from 'avue';
import 'avue/lib/theme-chalk/index.css';

2. 定义表单数据对象

data() {
  return {
    formData: {
      name: '',
      age: '',
      gender: '',
      hobbies: [],
      description: ''
    }
  };
},

3. 在模板中使用 Avue 的 `avue-form` 组件，并设置相应的属性

<template>
  <avue-form
    :model="formData"
    :rules="formRules"
    :inline="false"
    :label-width="100"
    :status-icon="true"
    :show-message="true"
    :disabled="false"
    :hidden="false"
    :submit="handleSubmit"
    :reset="handleReset"
  >
    <!-- 表单项 -->
  </avue-form>
</template>

4. 在 `avue-form` 组件中书写表单项，如 `avue-input`、`avue-select` 等

<avue-form-item prop="name" label="姓名">
  <avue-input v-model="formData.name" placeholder="请输入姓名"></avue-input>
</avue-form-item>
<avue-form-item prop="age" label="年龄">
  <avue-input v-model="formData.age" placeholder="请输入年龄"></avue-input>
</avue-form-item>
<avue-form-item prop="gender" label="性别">
  <avue-select v-model="formData.gender" placeholder="请选择性别">
    <avue-option value="male">男</avue-option>
    <avue-option value="female">女</avue-option>
  </avue-select>
</avue-form-item>
<avue-form-item prop="hobbies" label="爱好">
  <avue-checkbox-group v-model="formData.hobbies">
    <avue-checkbox label="music">音乐</avue-checkbox>
    <avue-checkbox label="sport">运动</avue-checkbox>
    <avue-checkbox label="reading">阅读</avue-checkbox>
  </avue-checkbox-group>
</avue-form-item>
<avue-form-item prop="description" label="个人描述">
  <avue-textarea v-model="formData.description" placeholder="请输入个人描述"></avue-textarea>
</avue-form-item>

5. 定义表单验证规则

data() {
  return {
    formRules: {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
      ],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
      ],
      gender: [
        { required: true, message: '请选择性别', trigger: 'change' }
      ],
      hobbies: [
        { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }
      ],
      description: [
        { required: true, message: '请输入个人描述', trigger: 'blur' },
        { min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' }
      ]
    }
  };
},

6. 定义表单提交和重置的方法

methods: {
  handleSubmit() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 表单验证通过
        console.log(this.formData);
      } else {
        // 表单验证失败
        console.log('验证失败');
      }
    });
  },
  handleReset() {
    this.$refs.form.resetFields();
  }
}