帮我写个表单加表格的前端页面，收集学生姓名年龄，框架用ant design Vue

好的，下面是一个简单的示例代码，你可以根据自己的需求进行修改：

<template>
  <div>
    <h2>学生信息表单</h2>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item label="姓名" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入姓名' }] }]" />
      </a-form-item>
      <a-form-item label="年龄" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-input-number v-decorator="['age', { rules: [{ required: true, message: '请输入年龄' }] }]" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
    <br>
    <h2>学生信息表格</h2>
    <a-table :columns="columns" :dataSource="data"></a-table>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import { FormModel, Input, Button, InputNumber, Table } from 'ant-design-vue';

export default {
  components: {
    'a-form': FormModel,
    'a-form-item': FormModel.Item,
    'a-input': Input,
    'a-input-number': InputNumber,
    'a-button': Button,
    'a-table': Table,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
      ],
      data: [],
    };
  },
  methods: {
    ...mapActions({
      addStudent: 'addStudent',
    }),
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.addStudent(values);
          this.form.resetFields();
          this.data = this.$store.state.students;
        }
      });
    },
  },
};
</script>

解释一下代码：

首先，我们引入了需要用到的 ant design Vue 组件，包括 FormModel、Input、Button、InputNumber 和 Table。

然后，我们定义了一个包含表单和表格的页面，其中表单用来收集学生信息，表格用来展示已经收集到的学生信息。

表单中包含两个输入框，一个是用来输入姓名的 Input 组件，另一个是用来输入年龄的 InputNumber 组件。我们使用 v-decorator 指令来绑定表单字段，同时指定了必填规则。

表单中还包含一个提交按钮，当用户点击提交按钮时，我们会调用 handleSubmit 方法。该方法会先进行表单校验，如果校验通过，就会将学生信息添加到 Vuex 中，并清空表单字段。最后，我们还更新了表格的数据源，以展示最新的学生信息。

表格中包含两列，一列是姓名，另一列是年龄。我们使用了 ant design Vue 中的 Table 组件来展示数据，同时使用了 columns 和 dataSource 属性来指定表格的列和数据源。

注意：这只是一个简单的示例代码，你需要根据自己的实际需求进行修改。同时，你需要安装 ant design Vue 和 Vuex 库，并在 main.js 中进行相应的配置才能使用该代码。