实现一组数组对象数据渲染出三个表格el-table 表格中的数据还可以被提交

好的，这里给出一个示例代码，使用 Vue 和 Element UI 来实现：

<template>
  <div>
    <el-table :data="tableData1">
      <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-table :data="tableData2">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
    </el-table>

    <el-table :data="tableData3">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="postcode" label="邮编"></el-table-column>
    </el-table>

    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' }
      ],
      tableData2: [
        { name: '张三', email: 'zhangsan@example.com', phone: '13888888888' },
        { name: '李四', email: 'lisi@example.com', phone: '13999999999' },
        { name: '王五', email: 'wangwu@example.com', phone: '13666666666' }
      ],
      tableData3: [
        { name: '张三', address: '上海市浦东新区', postcode: '200000' },
        { name: '李四', address: '北京市朝阳区', postcode: '100000' },
        { name: '王五', address: '深圳市南山区', postcode: '518000' }
      ]
    }
  },
  methods: {
    submit() {
      // 提交逻辑
      console.log('提交数据')
    }
  }
}
</script>

在这个示例中，我们定义了三个数组对象 `tableData1`、`tableData2` 和 `tableData3`，分别对应三个表格。我们使用 Element UI 的 `el-table` 和 `el-table-column` 组件来渲染表格，使用 `prop` 属性来指定每列要渲染的数据字段名。

最后，我们在页面上添加了一个提交按钮，并在 `submit` 方法中编写了提交逻辑。你可以根据自己的需求来实现具体的提交操作。