下面是一个使用 Vue.js 和
Mock.js 实现新增、编辑和删除表格数据的示例。
首先，确保你已经安装了 Vue.js 和
Mock.js。然后，创建一个 Vue 组件，包含一个表格和相应的按钮用于新增、编辑和删除数据。
HTML 模板代码如下：
```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 代码如下：
```
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 请求和返回随机数据，实际项目中需要替换成真实的后端接口。
最低0.47元/天 解锁文章
4590
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
