使用vue生成一个由后端数据传过来的表格 并且生成按钮点击按钮上传数据

以下是一个基本的使用Vue.js生成表格和上传数据的示例：

HTML代码：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="person in people">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td>{{ person.gender }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="uploadData">上传数据</button>
</div>

Vue.js代码：

new Vue({
  el: '#app',
  data: {
    people: [] // 存放从后端传来的数据
  },
  created: function() {
    // 从后端获取数据
    axios.get('/api/people')
      .then(response => {
        this.people = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    uploadData: function() {
      // 将数据上传至后端
      axios.post('/api/upload', this.people)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

上述代码中，我们使用Vue.js的响应式数据来存储从后端获取的数据。在创建Vue实例时，我们通过axios库发送GET请求从后端获取数据，并将其存储在people属性中。然后，我们使用Vue.js的指令v-for来循环渲染表格的每一行。最后，我们使用@click指令来监听上传数据按钮的点击事件，并在点击时使用axios库发送POST请求将数据上传至后端