vue+mockjs+实现新增编辑删除表格数据的例子

下面是一个使用 Vue.js 和 Mock.js 实现新增、编辑和删除表格数据的示例。

首先，确保你已经安装了 Vue.js 和 Mock.js。然后，创建一个 Vue 组件，包含一个表格和相应的按钮用于新增、编辑和删除数据。

HTML 模板代码如下：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.email }}</td>
        <td>
          <button @click="editItem(index)">Edit</button>
          <button @click="deleteItem(index)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>

  <form @submit.prevent="addItem" v-show="showForm">
    <input type="text" v-model="formData.name" placeholder="Name">
    <input type="number" v-model="formData.age" placeholder="Age">
    <input type="email" v-model="formData.email" placeholder="Email">
    <button type="submit">Add</button>
  </form>

  <button @click="showForm = true">Add New</button>
</div>

JavaScript 代码如下：

// 引入 Mock.js 库
const Mock = require('mockjs');

// 使用 Mock.js 拦截 AJAX 请求并返回随机数据
Mock.mock('/api/items', 'get', {
  'items|5-10': [{
    'name': '@cname',
    'age|18-60': 0,
    'email': '@email'
  }]
});

// 创建 Vue 实例
new Vue({
  el: '#app',
  data() {
    return {
      items: [],
      showForm: false,
      formData: {
        name: '',
        age: '',
        email: ''
      },
      editingIndex: -1
    };
  },
  mounted() {
    // 发送 AJAX 请求获取表格数据
    this.fetchItems();
  },
  methods: {
    fetchItems() {
      // 模拟发送 AJAX 请求
      axios.get('/api/items')
        .then(response => {
          this.items = response.data.items;
        })
        .catch(error => {
          console.error(error);
        });
    },
    addItem() {
      // 模拟发送 AJAX 请求
      axios.post('/api/items', this.formData)
        .then(() => {
          this.fetchItems();
          this.resetForm();
        })
        .catch(error => {
          console.error(error);
        });
    },
    editItem(index) {
      this.editingIndex = index;
      this.formData = { ...this.items[index] };
      this.showForm = true;
    },
    updateItem() {
      // 模拟发送 AJAX 请求
      axios.put(`/api/items/${this.editingIndex}`, this.formData)
        .then(() => {
          this.fetchItems();
          this.resetForm();
        })
        .catch(error => {
          console.error(error);
        });
    },
    deleteItem(index) {
      // 模拟发送 AJAX 请求
      axios.delete(`/api/items/${index}`)
        .then(() => {
          this.fetchItems();
        })
        .catch(error => {
          console.error(error);
        });
    },
    resetForm() {
      this.formData = {
        name: '',
        age: '',
        email: ''
      };
      this.editingIndex = -1;
      this.showForm = false;
    }
  }
});

在上述代码中，我们使用 Mock.js 来拦截 `/api/items` 的 GET 请求，并返回随机生成的数据。你可以根据需要修改这个接口的 URL 和响应数据。

注意，在实际的项目中，你需要使用真实的后端 API 来处理新增、编辑和删除数据的请求，并更新前端的表格数据。这里的代码只是一个简单的示例，使用 Mock.js 模拟这些操作。

当你运行这个示例时，你将看到一个包含表格和按钮的界面。点击 "Add New" 按钮将显示一个表单，你可以在表单中输入数据并点击 "Add" 按钮来新增一行数据。点击表格中的 "Edit" 按钮可以编辑对应行的数据，点击 "Delete" 按钮可以删除对应行的数据。

请注意，示例中使用的是 Mock.js 来模拟 AJAX 请求和返回随机数据，实际项目中需要替换成真实的后端接口。