vue axios实现表格的修改

首先，你需要在表格中添加一个编辑按钮，当用户点击编辑按钮时，会弹出一个模态框，里面包含表格的原始数据。在模态框中，用户可以修改数据并保存修改后的数据。

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

1. 在表格中添加编辑按钮

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>
            <button @click="editItem(index)">Edit</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="showEditModal">
      <h2>Edit Item</h2>
      <form>
        <div>
          <label for="edit-item-name">Name:</label>
          <input type="text" id="edit-item-name" v-model="editItemData.name">
        </div>
        <div>
          <label for="edit-item-age">Age:</label>
          <input type="text" id="edit-item-age" v-model="editItemData.age">
        </div>
        <button @click.prevent="saveItem()">Save</button>
        <button @click.prevent="cancelEdit()">Cancel</button>
      </form>
    </div>
  </div>
</template>

2. 在 Vue 实例中添加相关方法

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      showEditModal: false,
      editItemData: {
        id: '',
        name: '',
        age: ''
      }
    }
  },
  created() {
    this.fetchItems();
  },
  methods: {
    fetchItems() {
      axios.get('/api/items')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    editItem(index) {
      const item = this.items[index];
      this.editItemData.id = item.id;
      this.editItemData.name = item.name;
      this.editItemData.age = item.age;
      this.showEditModal = true;
    },
    saveItem() {
      axios.put(`/api/items/${this.editItemData.id}`, this.editItemData)
        .then(response => {
          this.showEditModal = false;
          this.fetchItems();
        })
        .catch(error => {
          console.log(error);
        });
    },
    cancelEdit() {
      this.showEditModal = false;
    }
  }
}
</script>

上述代码中，`fetchItems()` 方法用于获取表格数据。`editItem(index)` 方法会将表格中对应行的数据填充到编辑模态框中，`saveItem()` 方法会将修改后的数据通过 `axios.put()` 方法发送到服务器，然后关闭编辑模态框并刷新表格数据。`cancelEdit()` 方法用于关闭编辑模态框。

当用户点击编辑按钮时，会触发 `editItem(index)` 方法，然后该方法会将对应行的数据填充到 `editItemData` 对象中，然后将 `showEditModal` 属性设置为 `true`，这样就会显示编辑模态框。在模态框中，用户可以修改数据并保存或取消修改。