avue中将数据存储到from表单中示例

在avue中，可以使用 `:model` 属性将表单数据绑定到一个对象上，然后通过提交表单将数据保存到后端服务器中。下面是一个将数据存储到form表单中的示例：

<template>
  <div>
    <avue-form :model="formData" :rules="rules" :config="config" @submit="handleSubmit">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="formData.age"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="formData.gender">
          <el-option label="男" value="male"></el-option>
          <el-option label="女" value="female"></el-option>
        </el-select>
      </el-form-item>
    </avue-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        gender: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ]
      },
      config: {
        labelWidth: '80px'
      }
    }
  },
  methods: {
    handleSubmit() {
      // 发送请求将数据保存到后端服务器中
      console.log(this.formData)
    }
  }
}
</script>

在上面的代码中，我们定义了一个 `formData` 对象来存储表单数据，然后将其绑定到 `avue-form` 组件的 `:model` 属性上。当用户提交表单时，我们可以通过 `handleSubmit` 方法获取表单数据并将其发送到后端服务器中。注意在表单中定义了 `prop` 属性，这是为了进行表单验证，确保用户输入的数据符合要求。