用vue加element ui写一个tab切换的表格加表单页面

好的，下面是一个简单的示例代码：

<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="表格">
        <el-table :data="tableData">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="gender" label="性别"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="表单">
        <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
          <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-radio-group v-model="formData.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '表格',
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
      ],
      formData: {
        name: '',
        age: '',
        gender: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值', trigger: 'blur' },
          { validator: this.checkAge, trigger: 'blur' },
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('表单验证通过');
        } else {
          console.log('表单验证失败');
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    checkAge(rule, value, callback) {
      if (value < 18 || value > 60) {
        callback(new Error('年龄必须在18岁到60岁之间'));
      } else {
        callback();
      }
    },
  },
};
</script>

在这个示例中，我们使用了 Element UI 提供的 `el-tabs` 和 `el-tab-pane` 组件来实现标签页切换功能。在第一个标签页中，我们使用了 `el-table` 和 `el-table-column` 组件来展示表格数据；在第二个标签页中，我们使用了 `el-form`、`el-form-item`、`el-input` 和 `el-radio-group` 组件来实现表单功能。同时，在表单中我们还使用了 Element UI 提供的表单验证功能，通过 `rules` 属性来设置表单验证规则。在表单验证通过后，我们可以将表单数据提交到后端进行处理。